[BREAKING] Permettre l'usage de balise HTML dans les label des formulaire (PIX-11719) #568

xav-car · 2024-03-12T14:47:45Z

💥 BREAKING_CHANGES

Nous n'utiliserons plus le @ label pour définir un label. Nous passons par un yield pour permettre de plus de flexibilité

🎄 Problème

Certains usage de composant nécessite l'intégration de balise html à l'intérieur du label. a l'heure actuel ce n'est pas possible / pratique

🎁 Proposition

Contrat d'interface modifier pour :

PixCheckbox
PixInputPassword
PixInput
PixMultiSelect
PixRadioButton
PixSearchInput
PixSelect
PixTextarea
PixToggle

Sur chacun de ces composants, les labels peuvent maintenant être passés ainsi :

<PixXX><:label>Le label du champ</:label></PixXX>

Uniformisation des @requiredText en @requiredLabel.
Uniformisation des @labelSize en @size pour plus de flexibilité quand nous devrons changer la taille des input par rapport à la size donné en paramètre
Uniformisation des @information en @subLabel.

2 cas de figure :

Cas 1

PixInputPassword
PixInput
PixMultiSelect
PixSearchInput
PixSelect
PixToggle

Déplacer la valeur de l'attribut @label si il était présent.

Sur le PixMultiSelect, il y a un déjà un yield pas nommé il faut en complément de <:label> il faut utiliser <:default> pour ce qui était déjà présent.

Cas 2

PixCheckbox
PixRadioButton

Le label était déjà passé en yield non nommé. Il est maintenant nommé donc il faut ajouter les balises <:label>.

Cas 3

PixTextarea

Il n'y avait pas possibilité de fournir un label directement au composant. C'est maintenant disponible.

Option "inline label"

Pour les champs placés dans des paragraphes de texte, il est nécessaire de passer l'attribut @inlineLabel="true"

Option aria-label

Pour les label ne nécessitant pas d'être affichés à l'écran, ajouter le champ @screenReaderOnly={{true}}.

🌟 Remarques

Création d'un sub component pix-input-base qui centralise les fonctions utilisé dans les différents PixInput .

Lerci @yannbertrand pour le détail exhaustif

🎅 Pour tester

Ci verte faire un tour des composants sur PixUI

pix-bot-github · 2024-03-12T14:48:11Z

Une fois l'application déployée, elle sera accessible à cette adresse https://ui-pr568.review.pix.fr
Les variables d'environnement seront accessibles sur scalingo https://dashboard.scalingo.com/apps/osc-fr1/pix-ui-review-pr568/environment

xav-car · 2024-03-12T15:39:53Z

PR lié à ce souci passé inapercçu lors du dev du composant : pour l'usage de balise HTML dans les label

1024pix/pix#8003

yannbertrand · 2024-03-14T13:38:44Z

De ce que j'ai compris on a des changement de contrat d'interface sur :

PixCheckbox
PixInputPassword
PixInput
PixMultiSelect
PixRadioButton
PixSearchInput
PixSelect
PixTextarea
PixToggle

Sur chacun de ces composants, les labels peuvent maintenant être passés ainsi :

<PixXX><:label>Le label du champ</:label></PixXX>

Uniformisation des @requiredLabel / @requiredText.
Uniformisation des @labelSize en @size pour plus de flexibilité quand nous devrons changer la taille des input par rapport à la size paser en paramètre

2 cas de figure :

Cas 1

PixInputPassword
PixInput
PixMultiSelect
PixSearchInput
PixSelect
PixToggle

Déplacer la valeur de l'attribut @label si il était présent.

Sur le PixMultiSelect, il y a un déjà un yield pas nommé il faut en complément de <:label> il faut utiliser <:default> pour ce qui était déjà présent.

Cas 2

PixCheckbox
PixRadioButton

Le label était déjà passé en yield non nommé. Il est maintenant nommé donc il faut ajouter les balises <:label>.

Cas 3

PixTextarea

Il n'y avait pas possibilité de fournir un label directement au composant. C'est maintenant disponible.

Option "inline label"

Pour les champs placés dans des paragraphes de texte, il est nécessaire de passer l'attribut @inlineLabel="true"

app/stories/pix-input-password.mdx

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

app/stories/pix-input.mdx

app/stories/pix-input-password.mdx

app/stories/pix-search-input.mdx

app/stories/pix-search-input.stories.js

app/stories/pix-toggle.stories.js

AndreiaPena

Testé func sur Certif :

Composants ok :

PixInput
PixInputPassword
PixSelect
PixCheckbox
PixRadioButton
PixTextarea

Composants non utilisé dans l'app :

PixSearchInput
PixToggle

Composant ko :

PixMultiSelect

app/stories/pix-multi-select.stories.js

app/stories/pix-select.stories.js

addon/components/pix-filterable-and-searchable-select.hbs

app/stories/pix-multi-select.stories.js

addon/components/pix-filterable-and-searchable-select.hbs

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

app/stories/pix-filterable-and-searchable-select.stories.js

addon/components/pix-filterable-and-searchable-select.hbs

mariannebost · 2024-03-15T16:29:21Z

Test func sur Admin

Composants ok :

PixInput
PixInputPassword
PixCheckbox
PixRadioButton
PixTextarea
PixSearchInput
PixToggle
PixSelect

Composant ko :

PixMultiSelect comme pour @AndreiaPena sur Certif, le label des options ne s'affiche pas malgré l'utilisation de <:default as |option|>{{option.label}}</:default>

# [45.0.0](v44.3.8...v45.0.0) (2024-03-22) ### 💥 BREAKING CHANGE - [#568](#568) Permettre l'usage de balise HTML dans les label des formulaire (PIX-11719)

pix-service-auto-merge · 2024-03-22T09:57:05Z

🎉 This PR is included in version 45.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

xav-car self-assigned this Mar 12, 2024

xav-car added the 🚧 Development in progress Work In Progress label Mar 12, 2024

xav-car force-pushed the refactor/authorize-yield-on-label branch 2 times, most recently from 8c8dac5 to 2330369 Compare March 12, 2024 15:26

xav-car added 👀 Design Review Needed 👀 Func Review Needed 👀 Tech Review Needed cross-team Toutes les équipes de dev and removed 🚧 Development in progress Work In Progress labels Mar 12, 2024

xav-car marked this pull request as ready for review March 12, 2024 15:40

xav-car force-pushed the refactor/authorize-yield-on-label branch from 2330369 to 39554e3 Compare March 12, 2024 15:41

xav-car added the ⚠️ BREAKING CHANGES ⚠️ indique que la PR va introduire des breaking changes et donc qu'une version majeure est nécéssaire label Mar 12, 2024

xav-car force-pushed the refactor/authorize-yield-on-label branch 5 times, most recently from 8021c99 to 332e089 Compare March 14, 2024 11:13

AndreiaPena reviewed Mar 15, 2024

View reviewed changes

app/stories/pix-input-password.mdx Outdated Show resolved Hide resolved

app/stories/pix-radio-button.stories.js Show resolved Hide resolved

er-lim reviewed Mar 15, 2024

View reviewed changes

AndreiaPena requested changes Mar 15, 2024

View reviewed changes

er-lim reviewed Mar 15, 2024

View reviewed changes

yannbertrand force-pushed the refactor/authorize-yield-on-label branch 5 times, most recently from 585eb32 to fec8122 Compare March 19, 2024 08:41

xav-car force-pushed the refactor/authorize-yield-on-label branch from 90cec98 to bd6c6a1 Compare March 22, 2024 08:49

yannbertrand added Design review OK Func Review OK Tech review OK 🚀 Ready to Merge and removed 👀 Design Review Needed 👀 Func Review Needed 👀 Tech Review Needed labels Mar 22, 2024

xav-car added 16 commits March 22, 2024 09:51

feat(pix-input-password): add named yield to pix input password

80b00d7

feat(pix-input): add named yield to pix input

97825cb

feat(pix-search-input): add named yield to pix search input

99798d1

feat(pix-textarea): add named yield to pix textarea

6639fd2

feat(pix-toggle): add named yield to pix toggle

d38c893

feat(pix-select): add named yield to pix select

6e1d8b1

feat(pix-multi-select): add named yield to pix multi select

be9093d

feat(pix-checkbox): use name yield on checkbox

7b1f039

feat(pix-radiobutton): use name yield on radio button

97491a9

update form stories

a7cec7e

feat(label): authorize inlineLabel on component

647d4fd

feat(PFASS): use yield label

79a04e7

feat(pix-filter-banner): update stories

3c4ce86

feat(pix-pagnation): update PixSelect on PixPagination

8e2c4e5

refactor(input): add input base component

9c51cdf

feat(pix-ui): define size params instead of labelSize

db047b3

pix-service-auto-merge force-pushed the refactor/authorize-yield-on-label branch from bd6c6a1 to db047b3 Compare March 22, 2024 09:51

pix-service-auto-merge merged commit 80a254c into dev Mar 22, 2024
3 of 6 checks passed

pix-service-auto-merge deleted the refactor/authorize-yield-on-label branch March 22, 2024 09:55

pix-service-auto-merge pushed a commit that referenced this pull request Mar 22, 2024

chore(release): 45.0.0 [skip ci]

e5192e0

# [45.0.0](v44.3.8...v45.0.0) (2024-03-22) ### 💥 BREAKING CHANGE - [#568](#568) Permettre l'usage de balise HTML dans les label des formulaire (PIX-11719)

pix-service-auto-merge added the released label Mar 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BREAKING] Permettre l'usage de balise HTML dans les label des formulaire (PIX-11719) #568

[BREAKING] Permettre l'usage de balise HTML dans les label des formulaire (PIX-11719) #568

xav-car commented Mar 12, 2024 •

edited by yannbertrand

Loading

pix-bot-github commented Mar 12, 2024

xav-car commented Mar 12, 2024 •

edited

Loading

yannbertrand commented Mar 14, 2024 •

edited by xav-car

Loading

AndreiaPena left a comment •

edited

Loading

mariannebost commented Mar 15, 2024 •

edited

Loading

pix-service-auto-merge commented Mar 22, 2024

[BREAKING] Permettre l'usage de balise HTML dans les label des formulaire (PIX-11719) #568

[BREAKING] Permettre l'usage de balise HTML dans les label des formulaire (PIX-11719) #568

Conversation

xav-car commented Mar 12, 2024 • edited by yannbertrand Loading

💥 BREAKING_CHANGES

🎄 Problème

🎁 Proposition

Cas 1

Cas 2

Cas 3

Option "inline label"

Option aria-label

🌟 Remarques

🎅 Pour tester

pix-bot-github commented Mar 12, 2024

xav-car commented Mar 12, 2024 • edited Loading

yannbertrand commented Mar 14, 2024 • edited by xav-car Loading

Cas 1

Cas 2

Cas 3

Option "inline label"

AndreiaPena left a comment • edited Loading

Choose a reason for hiding this comment

mariannebost commented Mar 15, 2024 • edited Loading

pix-service-auto-merge commented Mar 22, 2024

xav-car commented Mar 12, 2024 •

edited by yannbertrand

Loading

xav-car commented Mar 12, 2024 •

edited

Loading

yannbertrand commented Mar 14, 2024 •

edited by xav-car

Loading

AndreiaPena left a comment •

edited

Loading

mariannebost commented Mar 15, 2024 •

edited

Loading