From 53f3a349fb1ea8093482fb3b79e1836ed16f6481 Mon Sep 17 00:00:00 2001
From: Richard Helm <86777660+RichardHelm@users.noreply.github.com>
Date: Wed, 3 Apr 2024 12:52:12 +0100
Subject: [PATCH] feat(helper-text): allow setting helper-text via slot
(VIV-1616) (#1636)
* Refactor feedback template to include logic
* Add helper-text slot
* Document helper-text slot
* Forward helper-text slot
* Fix select styling
* Update snapshots
* Update READMEs
* Fix select
* Add test for feedbackTemplate
* Refactor tests
* Add test for ignored events
---
libs/components/src/lib/checkbox/README.md | 20 +-
.../src/lib/checkbox/checkbox.spec.ts | 54 +-----
.../src/lib/checkbox/checkbox.template.ts | 7 +-
libs/components/src/lib/checkbox/checkbox.ts | 13 +-
...pshots-checkbox-Desktop-Chromium-linux.png | Bin 27398 -> 33641 bytes
...apshots-checkbox-Desktop-Firefox-linux.png | Bin 31789 -> 39238 bytes
...napshots-checkbox-Desktop-Safari-linux.png | Bin 26167 -> 32121 bytes
libs/components/src/lib/date-picker/README.md | 14 +-
.../src/lib/date-picker/date-picker.ts | 1 +
.../src/lib/date-range-picker/README.md | 14 +-
.../date-range-picker/date-range-picker.ts | 1 +
libs/components/src/lib/file-picker/README.md | 16 +-
.../src/lib/file-picker/file-picker.spec.ts | 39 ----
.../lib/file-picker/file-picker.template.ts | 9 +-
.../src/lib/file-picker/file-picker.ts | 5 +-
.../components/src/lib/number-field/README.md | 18 +-
.../src/lib/number-field/number-field.spec.ts | 123 ------------
.../lib/number-field/number-field.template.ts | 11 +-
.../src/lib/number-field/number-field.ts | 9 +-
...ts-number-field-Desktop-Chromium-linux.png | Bin 33793 -> 39052 bytes
...ots-number-field-Desktop-Firefox-linux.png | Bin 45982 -> 54262 bytes
...hots-number-field-Desktop-Safari-linux.png | Bin 30538 -> 35582 bytes
libs/components/src/lib/select/README.md | 23 ++-
libs/components/src/lib/select/select.scss | 10 +-
libs/components/src/lib/select/select.spec.ts | 73 ++-----
.../src/lib/select/select.template.ts | 73 ++++---
libs/components/src/lib/select/select.ts | 14 +-
...napshots-select-Desktop-Chromium-linux.png | Bin 55771 -> 59840 bytes
...snapshots-select-Desktop-Firefox-linux.png | Bin 89207 -> 96323 bytes
.../snapshots-select-Desktop-Safari-linux.png | Bin 50416 -> 54639 bytes
libs/components/src/lib/text-area/README.md | 16 +-
.../src/lib/text-area/text-area.spec.ts | 178 ------------------
.../src/lib/text-area/text-area.template.ts | 11 +-
.../components/src/lib/text-area/text-area.ts | 9 +-
...shots-text-area-Desktop-Chromium-linux.png | Bin 46152 -> 50719 bytes
...pshots-text-area-Desktop-Firefox-linux.png | Bin 55799 -> 61886 bytes
...apshots-text-area-Desktop-Safari-linux.png | Bin 41902 -> 46353 bytes
libs/components/src/lib/text-field/README.md | 19 +-
.../src/lib/text-field/text-field.spec.ts | 147 ---------------
.../src/lib/text-field/text-field.template.ts | 11 +-
.../src/lib/text-field/text-field.ts | 9 +-
libs/components/src/lib/time-picker/README.md | 14 +-
.../src/lib/time-picker/time-picker.spec.ts | 17 ++
.../lib/time-picker/time-picker.template.ts | 8 +-
.../src/lib/time-picker/time-picker.ts | 10 +-
.../date-picker/date-picker-base.spec.ts | 17 ++
.../date-picker/date-picker-base.template.ts | 8 +-
.../shared/date-picker/date-picker-base.ts | 9 +-
.../form-elements/form-elements.spec.ts | 119 +++++++++++-
.../patterns/form-elements/form-elements.ts | 154 +++++++++------
.../patterns/form-elements/message.scss | 6 +-
.../utils/applyMixinsWithObservables.ts | 18 ++
52 files changed, 553 insertions(+), 774 deletions(-)
create mode 100644 libs/components/src/shared/utils/applyMixinsWithObservables.ts
diff --git a/libs/components/src/lib/checkbox/README.md b/libs/components/src/lib/checkbox/README.md
index 326c5ab150..0d006baffc 100644
--- a/libs/components/src/lib/checkbox/README.md
+++ b/libs/components/src/lib/checkbox/README.md
@@ -71,7 +71,7 @@ Use the `connotation` attribute to set the checkbox color.
### Helper text
-Add the `helper-text` to add some helper text below the checkbox.
+Add the `helper-text` to add some helper text below the checkbox. If you need to add HTML to the helper text, use the `helper-text` slot.
- Type: `string` | `undefined`
- Default: `undefined`
@@ -165,6 +165,24 @@ The default slot allows you to use rich content as the checkbox's label.
```
+### Helper-Text
+
+The `helper-text` slot allows you to use rich content as the checkbox's helper text.
+
+```html preview
+
+
V1L)$m7KEB^>w=hD5Q_*85kZAg;9qR98|wi
z_FGx{(NO-`r)8ux`rL-HvdR8@Jm1O$qsZ1g^OHY@`X3Dsime~<(aUD$<%%il@>?)@)9IUWeK8fY+=fC&Xe$y
hir*LU&C
zZvf~pTe(=UNijdR
7xCFjQL?*EOE-N-#6v(mZYrr}~;-gu+ibF7zQK#dr0&sh1auPhK7x
zDl-0~*QMgxsYD1-X)L`tL2`+RnlY9<#+&YL4TEcUa)lJAP*N^buc6)vMcZQ#ySJAo
zQs(V3)_${2nA5gl$>X$Po=qY=pR6o;UaJ}ZsVVi7y}5@WBphwOzBxD@85$dZ=w8uV
zZ1Ig3a(lA8k~BYHJ(?@OX#dT1@7p>70fA58JsLO*ORuGyL2`2P!Gwkl-Lq%JbaZrr
z?%7H#muI^n(Bh)5(CyW+`gd2m=(E8DgRtZE2d*o4gTHN1-o2~IFND`MgbbDGFp9r)
zbKMs{jtvqNw2%B^6cT*DXz@3LxMni(@%naZgI5CwI|mX?nhZixw%jzTREVvgMDsC5
zYAXEvJm_H2m&jtm@oAB#a&?@x)vsUt{N9>AG~SU}E|3jjatfR6Nj{~=ABuRM@yeo{
zQ@nhNgfxhRmMb#EZiRsWla+u>9m~W7|HZB5@k-6uZEtjm?S3jzMTP3(aoGB7{g->x
z_YTfTS_eyzL2%ibpSwIF*ShbQ)GF-yOm+Tvd0dqRBH$Oz$ty2^>prkFR-jDAZ%ca~
zQF>El0{w*Z@{+i@x$SD7MN26t2qUAoZ6)>Kc##htb7D*Z}|0b`$a2}oqU%!5pl9g@u$GT4~J8gv(s66bL>m1NS
z$fh>YvXB*2&je>@$88V1*ZtLEasc{_^-;W|ql1>288a#>
zYO2O6N&B12-Y+o(0+oRX3#?9LR1^|S{xWB
Y>cK
z1?3zZDfQCB8Tefk=s6!h3Vo=ChJitdj+@`HH|GSN6z3=_L|$GlT-sv&kd=k$uqLHv
z%z%iFADLa8Z1QqCI4nRQ{1GW