Skip to content

feat(client,prospect): add warning variant to TextArea (#1803)#1807

Open
Debaerdm wants to merge 4 commits intomainfrom
feat/textarea-warning-variant-1803
Open

feat(client,prospect): add warning variant to TextArea (#1803)#1807
Debaerdm wants to merge 4 commits intomainfrom
feat/textarea-warning-variant-1803

Conversation

@Debaerdm
Copy link
Copy Markdown
Contributor

Add a warning variant to the TextArea component (Apollo + LF), consistent with the warning variant introduced on InputText, InputDate, and Dropdown.

Trigger the warning state by passing message together with messageType="warning". A new af-form__textarea--warning class is applied to the textarea, styled with the orange-1050 token (2px inner shadow by default, 3px on hover/focus/active). The existing :not(:placeholder-shown) blue override is still overridden correctly because the warning selector comes later and has equal specificity.

Closes #1803

Figma: https://www.figma.com/design/vwprvN2ELfI50pjU6MK1Ea/branch/vBNH3TFq3TBbpHNLYuusCE/%E2%9C%A8-B2C-%E2%80%A2-Design-System-Canop%C3%A9e?node-id=17278-55817


Made with Claude

Comment thread packages/canopee-react/src/prospect-client/Form/TextArea/TextAreaCommon.tsx Outdated
Comment thread packages/canopee-css/src/prospect-client/Form/TextArea/TextAreaLF.css Outdated
JLou
JLou previously approved these changes Apr 22, 2026
Debaerdm added a commit that referenced this pull request Apr 23, 2026
…pr skill

Add section "Conventions apprises" with 11 rules extracted from PR reviews:
CSS Common over Apollo/LF duplication, classModifier for variants,
getClassName mandatory, MDX in English, no invented token values,
focus-visible vs focus, one story per variant, argTypes/decorators in meta.

Sources: PRs #1793 #1801 #1807 #1805 #1783 #1792 #1765 #1766 #1775 #1771
@Debaerdm
Copy link
Copy Markdown
Contributor Author

Retours appliques dans le commit 7c84c57 :

  • TextAreaCommon.tsx utilise maintenant la fonction getClassName avec modifiers (hasWarning && "warning"). Ajout de la prop classModifier pour rester coherent avec les autres composants (InputDate, etc.).
  • Bloc &[class*="--warning"] deplace dans TextAreaCommon.css, supprime de TextAreaApollo.css et TextAreaLF.css (les deux themes utilisaient exactement --orange-1050).

Les valeurs aria-invalid restent per-theme car elles different (red-alert-1000 Apollo vs red-alert-1200 LF).


Made with Claude

@Debaerdm
Copy link
Copy Markdown
Contributor Author

Retour applique dans le commit 50fa4a1 : suppression de la prop classModifier et simplification a modifiers: [hasWarning && "warning"] directement dans getClassName, comme suggere.


Made with Claude

@sonarqubecloud
Copy link
Copy Markdown

@Debaerdm
Copy link
Copy Markdown
Contributor Author

Retours appliques :

  • getClassName utilise dans TextAreaCommon.tsx (commit 7c84c57)
  • CSS warning mutualise entre Apollo et LF (commit 7c84c57)
  • Prop classModifier retiree, modifiers: [hasWarning && "warning"] directement (commit 50fa4a1)

Made with Claude

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Input Text Area • Evolution • Ajout State warning

3 participants