feat(DropdownMenu): added dropdown menu component, created bento menu and update user-profile #299

JsGarneau · 2021-09-21T18:17:00Z

Sorry pour la grosse PR!

Il y a 3 test présentement commenté pour dropdown-menu et dropdown-menu-button. Un concernant le focus et les autre concernant un comportement que je ne suis pas arrivé à reproduire, càd le closeOnClick qui était triggered par onChange, mais étant donner que je travail maintenant avec des children, j'ai pas trop réussi à trouver le pattern pour ca, peut-être que quelqu'un pourrait m'aider.

Il manque aussi la gestion des lozenge, mais ca va venir car le component lozenge n'existe pas encore.

Bug fix checklist

Units tests have been adjusted to account for bug.
The fix has been tested in multiple Storybook stories.
All GitHub checks are successful.

New component checklist

The new component and its tests are in the same component folder.
The component is unit tested and/or snapshot tested.
All of the relevant Storybook stories have been added to the storybook package.
There are no linting errors or warnings in the modified/new code.
All GitHub checks are successful.

alexbrillant

partie 1

packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx

packages/react/src/components/bento-menu-button/bento-menu-button.tsx

packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx

packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx

alexbrillant · 2021-09-21T20:42:01Z

some pics would be nice

maxime-gendron

J'ai remarqué que le bouton du Bento n'est pas responsive. Il probablement possible de faire comme j'ai fait dans ma PR #300 et d'utiliser directement le component IconButton.

packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx

packages/react/src/components/bento-menu-button/bento-menu-button.tsx

packages/react/src/components/dropdown-menu/list-items/nav-item.tsx

packages/react/src/components/dropdown-menu/list-items/label-item.tsx

packages/react/src/components/user-profile/user-profile.tsx

packages/storybook/stories/bento-menu-button.stories.tsx

Pierregagne

J'ai fais un check rapide et ça look good :)

packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx

packages/react/src/components/dropdown-menu/list-items/nav-item.tsx

maxime-gendron

Je remarque quelques différences dans les styles des maquettes vs ce qu'on a en ce moment (gauche: maquettes | droite: storybook):

Le border radius dans les maquettes est 8px et il est 4pxen ce moment.
Les produits sont préfixés Equisoft dans les maquettes.
Le logo des produits est plus petit dans les maquettes.
Le container du menu est plus large dans les maquettes.
L'espacement entre les produits n'est pas le même que dans les maquettes (en ce moment un produit fait 56px de haut, mais dans les maquettes 60px).
Les spacings dans la section ressources ne sont pas comme sur les maquettes.

packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx

packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx

packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx

packages/react/src/components/dropdown-menu/dropdown-menu.tsx

packages/react/src/components/dropdown-menu/list-items/label-item.tsx

packages/react/src/components/dropdown-menu/list-items/nav-item.tsx

packages/storybook/stories/user-profile.stories.tsx

packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx

packages/react/src/components/bento-menu-button/bento-menu-button.tsx

maxime-gendron

Le container du bento fait 386px au lieu de 384px. Il manque probablement juste box-sizing: border-box sur le container.

Aussi, l'overflow ellipsis ne semble plus fonctionner

packages/react/src/components/bento-menu-button/bento-menu-button.tsx

packages/react/src/components/dropdown-menu/list-items/item-content.tsx

packages/react/src/components/bento-menu-button/bento-menu-button.tsx

packages/react/src/components/dropdown-menu/list-items/nav-item.tsx

maxime-gendron

L'overflow ellipsis ne fonctionne pas en ce moment.

packages/react/src/components/bento-menu-button/bento-menu-button.tsx

packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx

packages/react/src/components/dropdown-menu/list-items/nav-item.tsx

packages/react/src/components/user-profile/user-profile.tsx

packages/storybook/stories/bento-menu-button.stories.tsx

… and update user-profile

LarryMatte

External links

lorsqu'il y a des ellipsis, le svg est inclus avec le texte et donc il n'est pas affiché. Idéalement il faudrait le voir quand même.
Il faudrait aussi centrer l'icône avec le texte.

Sinon petits commentaires en lien avec les groupes et le css ici et là mais rien de majeur.

Good Job serieux!

packages/react/src/components/dropdown-menu/list-items/group-item.tsx

packages/react/src/components/bento-menu-button/bento-menu-button.tsx

packages/react/src/components/lozenge/lozenge.tsx

LarryMatte · 2021-10-05T20:25:09Z

User-profile

Je ne sais pas pourquoi mais tu as un <label> comme parent de ton user dans le user-profile... À supprimer.
le line-height du nom devrait être de 1.4rem. Assures-toi que ça ne vient pas petter ailleurs par contre.
Tu peux surement cleaner le code et enlever des span. voir la doc

JsGarneau force-pushed the dev/DS-481 branch from 1808b23 to 352634d Compare September 21, 2021 18:19

alexbrillant reviewed Sep 21, 2021

View reviewed changes

maxime-gendron reviewed Sep 22, 2021

View reviewed changes

Pierregagne self-requested a review September 24, 2021 14:05

JsGarneau force-pushed the dev/DS-481 branch 2 times, most recently from b3009b3 to 7d6dfec Compare September 27, 2021 14:27

Pierregagne approved these changes Sep 28, 2021

View reviewed changes

packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx Outdated Show resolved Hide resolved

packages/react/src/components/dropdown-menu/list-items/nav-item.tsx Outdated Show resolved Hide resolved

JsGarneau force-pushed the dev/DS-481 branch 5 times, most recently from 7410868 to 7d9b0f4 Compare September 29, 2021 15:57

maxime-gendron reviewed Sep 30, 2021

View reviewed changes

JsGarneau force-pushed the dev/DS-481 branch 2 times, most recently from 37eda71 to f19671a Compare September 30, 2021 20:32

alexbrillant reviewed Oct 1, 2021

View reviewed changes

packages/react/src/components/bento-menu-button/bento-menu-button.tsx Show resolved Hide resolved

alexbrillant reviewed Oct 1, 2021

View reviewed changes

packages/react/src/components/bento-menu-button/bento-menu-button.tsx Show resolved Hide resolved

JsGarneau force-pushed the dev/DS-481 branch 2 times, most recently from 5cb3d89 to c6ac483 Compare October 1, 2021 15:03

maxime-gendron reviewed Oct 4, 2021

View reviewed changes

alexbrillant requested changes Oct 4, 2021

View reviewed changes

packages/react/src/components/dropdown-menu/list-items/nav-item.tsx Outdated Show resolved Hide resolved

JsGarneau force-pushed the dev/DS-481 branch 2 times, most recently from 1cb8db9 to f7d9dae Compare October 5, 2021 13:08

alexbrillant approved these changes Oct 5, 2021

View reviewed changes

maxime-gendron suggested changes Oct 5, 2021

View reviewed changes

JsGarneau force-pushed the dev/DS-481 branch 2 times, most recently from 85dc77a to aec3d2c Compare October 5, 2021 18:55

maxime-gendron approved these changes Oct 5, 2021

View reviewed changes

feat(DropdownMenu): added dropdown menu component, created bento menu…

5292050

… and update user-profile

JsGarneau force-pushed the dev/DS-481 branch from aec3d2c to 5292050 Compare October 5, 2021 19:03

JsGarneau merged commit 5dfc261 into master Oct 5, 2021

JsGarneau deleted the dev/DS-481 branch October 5, 2021 19:13

LarryMatte reviewed Oct 5, 2021

View reviewed changes

packages/react/src/components/dropdown-menu/list-items/group-item.tsx Show resolved Hide resolved

packages/react/src/components/bento-menu-button/bento-menu-button.tsx Show resolved Hide resolved

packages/react/src/components/lozenge/lozenge.tsx Show resolved Hide resolved

JsGarneau mentioned this pull request Oct 6, 2021

fix(DropdownNav): better ellipsis and code cleanup #314

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(DropdownMenu): added dropdown menu component, created bento menu and update user-profile #299

feat(DropdownMenu): added dropdown menu component, created bento menu and update user-profile #299

JsGarneau commented Sep 21, 2021 •

edited

Loading

alexbrillant left a comment

alexbrillant commented Sep 21, 2021

maxime-gendron left a comment

Pierregagne left a comment

maxime-gendron left a comment

maxime-gendron left a comment

maxime-gendron left a comment

LarryMatte left a comment

LarryMatte commented Oct 5, 2021 •

edited

Loading

feat(DropdownMenu): added dropdown menu component, created bento menu and update user-profile #299

feat(DropdownMenu): added dropdown menu component, created bento menu and update user-profile #299

Conversation

JsGarneau commented Sep 21, 2021 • edited Loading

Bug fix checklist

New component checklist

alexbrillant left a comment

Choose a reason for hiding this comment

alexbrillant commented Sep 21, 2021

maxime-gendron left a comment

Choose a reason for hiding this comment

Pierregagne left a comment

Choose a reason for hiding this comment

maxime-gendron left a comment

Choose a reason for hiding this comment

maxime-gendron left a comment

Choose a reason for hiding this comment

maxime-gendron left a comment

Choose a reason for hiding this comment

LarryMatte left a comment

Choose a reason for hiding this comment

LarryMatte commented Oct 5, 2021 • edited Loading

JsGarneau commented Sep 21, 2021 •

edited

Loading

LarryMatte commented Oct 5, 2021 •

edited

Loading