feat(textfield): support character count (#1245)

components/textfield/src/vwc-textfield.scss

@@ -3,6 +3,7 @@
 @forward './vwc-textfield-input';
 @forward './vwc-textfield-action';
 @use './vwc-textfield-variables' as textfield-variables;
+@use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vwc-icon/src/partials/vwc-icon-variables' as icon-variables;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
@@ -87,8 +88,6 @@
 }
 
 :host([dense][label]:not([label=''])) {
-	padding-top: 24px;
-
 	.mdc-text-field {
 		.mdc-floating-label {
 			top: -25px;
@@ -105,6 +104,11 @@
 			color: var(--mdc-text-field-ink-color);
 		}
 	}
+
+	@at-root :host([charcounter]), // also if charcounter is present. temporary fix
+	& {
+		padding-top: 24px;
+	}
 }
 
 .mdc-text-field {
@@ -232,3 +236,11 @@ vwc-notched-outline {
 .mdc-floating-label {
 	left: 40px;
 }
+
+.mdc-text-field-character-counter {
+	@include typography.typography-cat-shorthand('body-2');
+	position: absolute;
+	top: -25px;
+	right: 0;
+	color: var(#{scheme-variables.$vvd-color-neutral-70}) !important;
+}

components/textfield/src/vwc-textfield.ts

@@ -148,7 +148,7 @@ export class VWCTextField extends MWCTextField {
 	override render(): TemplateResult {
 		const shouldRenderCharCounter = this.charCounter && this.maxLength !== -1;
 		const shouldRenderHelperText =
-			!!this.helper || !!this.validationMessage || shouldRenderCharCounter;
+			!!this.helper || !!this.validationMessage;
 
 		/** @classMap */
 		const classes = {
@@ -166,6 +166,7 @@ export class VWCTextField extends MWCTextField {
 			<label class="mdc-text-field ${classMap(classes)}">
 				${this.renderRipple()}
 				${this.outlined ? this.renderOutline() : this.renderLabel()}
+				${this.renderCharCounter(shouldRenderCharCounter)}
 				${this.renderLeadingIcon()}
 				${this.renderPrefix()}
 				${this.renderInput(shouldRenderHelperText)}

components/textfield/stories/textfield-all.stories.js

@@ -14,6 +14,7 @@ export {
 export {
 	Autofocus,
 	Default,
+	CharCounter,
 	Dense,
 	Disabled,
 	Icon,

components/textfield/stories/textfield-variants.stories.js

@@ -9,6 +9,9 @@ const Template = (args) =>
 export const Default = Template.bind({});
 Default.args = { label: 'e.g. username', value: 'Initial value', placeholder: 'Placeholder' };
 
+export const CharCounter = Template.bind({});
+CharCounter.args = { label: 'Limited value', dense: '', charCounter: '', maxLength: 18 };
+
 export const Dense = Template.bind({});
 Dense.args = { dense: '', label: 'VWC Textfield' };
 

components/textfield/test/textfield-char-counter.test.js

@@ -0,0 +1,46 @@
+import { COMPONENT_NAME } from '../vwc-textfield.js';
+import {
+	textToDomToParent,
+	waitNextTask,
+} from '../../../test/test-helpers.js';
+import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
+
+chai.use(chaiDomDiff);
+
+describe('textfield character counter', () => {
+	let addedElement;
+
+	beforeEach(async () => {
+		[addedElement] = textToDomToParent(`
+			<${COMPONENT_NAME} charcounter maxlength="18"></${COMPONENT_NAME}>
+		`);
+		await waitNextTask();
+	});
+
+	afterEach(() => {
+		addedElement.remove();
+	});
+
+	it('should have character counter', async () => {
+		expect(getCharCounter(addedElement)).to.be.exist;
+	});
+
+	it('should have character counter displaying correct count', async () => {
+		const charCounter = getCharCounter(addedElement);
+
+		const initialCharCounter = charCounter.textContent;
+
+		addedElement.value = 'some value';
+		await waitNextTask();
+
+		const updatedCharCounter = charCounter.textContent;
+
+		expect(initialCharCounter).to.equal('0 / 18');
+		expect(updatedCharCounter).to.equal('10 / 18');
+	});
+});
+
+function getCharCounter(baseElement) {
+	return baseElement.shadowRoot.querySelector('.mdc-text-field-character-counter');
+}
+

ui-tests/tests/vwc-textfield/index.js

@@ -1,6 +1,7 @@
 import '@vonage/vwc-textfield';
 import {
 	Default,
+	CharCounter,
 	Dense,
 	Disabled,
 	Icon,
@@ -16,6 +17,7 @@ import { storiesToElement } from '../../utils/storiesToElement';
 export async function createElementVariations(wrapper) {
 	const testWrapper = storiesToElement([
 		Default,
+		CharCounter,
 		Dense,
 		Disabled,
 		Icon,