feat: improve pro label

[oliviercperrier]

FEAT

• relates to CLIN-2923

Description

Make ProLabel supports Popover and Tooltip for the info icon.

[JIRA LINK]

Acceptance Criterias

Validation

• [ x] Storybook add or modified
• [ x] version Update in package.json and Release.md
• Code Approved
• QA Done
• Design/UI Approved from design

Screenshot

Mention

@kstonge @luclemo

[github-actions]

Coverage report for packages/ui

St.❔	Category	Percentage	Covered / Total
🟢	Statements	100%	0/0
🟢	Branches	100%	0/0
🟢	Functions	100%	0/0
🟢	Lines	100%	0/0

Test suite run success

0 tests passing in 0 suite.

Report generated by 🧪jest coverage report action from dfecd73

[github-actions]

Project Coverage and Test

Statements : 33.65% ( 10612/31532 )
Branches : 55.3% ( 631/1141 )
Functions : 31.82% ( 197/619 )
Lines : 33.65% ( 10612/31532 )

Test Suites: 58 passed, 58 total
Tests: 262 passed, 262 total
Snapshots: 0 total
Time: 88.664 s
Ran all test suites.

[atoulous]

C'est chimique le join que tu fais la, pourquoi ne pas juste rajouter le nouveau prop en optionnel dans l'interface actuelle ? De cette manière tu réduits les chances d'impacter l'existant, car l'interface est exportée.

export interface IProLabelProps {
    title: string;
    className?: string;
    popoverProps?: PopoverProps;
    tooltipProps?: TooltipProps;
    colon?: boolean;
    size?: 'small' | 'default';
    requiredMark?: boolean;
}

[oliviercperrier]

@atoulous Ca s'appel du conditional typing c'est loin d'être chimique hahah.

tooltipProps ne peut pas être défini en meme temps que popoverProps, d'où le conditional typing.

Ca n'impacte en rien l'existant.

Je peux faire ce que tu dis, mais en faisant cela, on se retrouve avec des components qui ont des props qui peuvent être définies mais qui ne font rien au final, ce qui est selon moi une mauvaise pratique.

Je peux te le mettre plus beau en séparant les types si c'est le visuel qui t'achale 😉

[atoulous]

Garde comme ça si c'est ce que tu préconises 👍
Selon moi l'optional typing suffisait, mais pour le conditional je te partage une solution que je trouve plus lisible avec du naming

interface IProLabelBaseProps {
    title: string;
    className?: string;
    colon?: boolean;
    size?: 'small' | 'default';
    requiredMark?: boolean;
}

interface IProLabelWithPopover extends IProLabelBaseProps {
    popoverProps: PopoverProps;
    tooltipProps?: never;
}

interface IProLabelWithTooltip extends IProLabelBaseProps {
    tooltipProps: TooltipProps;
    popoverProps?: never;
}

export type IProLabelProps = IProLabelWithPopover | IProLabelWithTooltip;

[AltefrohneGaelle]

je viens mettre mon petit grain de sel mais vous pouvez l'ignorer 😄
J'avoue que je trouve plus lisible la solution d'Aymeric mais les 2 me vont pour du conditional et in fine ça fait la même chose.

[oliviercperrier]

Sinon, voici ce que j'ai fait

interface IProLabelWithPopover {
    popoverProps?: PopoverProps;
    tooltipProps?: never;
}

interface IProLabelWithTooltip {
    popoverProps?: never;
    tooltipProps?: TooltipProps;
}

export type IProLabelProps = {
    title: string;
    className?: string;
    colon?: boolean;
    size?: 'small' | 'default';
    requiredMark?: boolean;
} & (IProLabelWithPopover | IProLabelWithTooltip);

[francisl]

👍

[francisl]

@oliviercperrier tu vas juste devoir faire un rebase et mettre a jour ta version a 10.13.0 (new features)