feat(text-field): add scale attribute with condensed (VIV-1813) (#1899)

libs/components/src/lib/text-field/README.md

@@ -122,6 +122,17 @@ Use the `icon` attribute to add an icon.
 <vwc-text-field icon="search-line" label="Search..."></vwc-text-field>
 ```
 
+### Scale
+
+Use the `scale` attribute to change the text field's size.
+
+- Type: `'condensed'` | `'normal'`
+- Default: `'normal'`
+
+```html preview blocks
+<vwc-text-field label="Condensed" scale="condensed"></vwc-text-field>
+```
+
 ### Shape
 
 Use the `shape` attribute to change the text field's edges.

libs/components/src/lib/text-field/partials/_variables.scss

@@ -1,3 +1,6 @@
 $text-field-gutter-start: --_text-field-gutter-start;
 $text-field-gutter-end: --_text-field-gutter-end;
 $text-field-icon-size: --_text-field-icon-size;
+$text-field-block-size: --_text-field-block-size;
+$text-field-border-radius: --_text-field-border-radius;
+$text-field-pill-border-radius: --_text-field-pill-border-radius;

libs/components/src/lib/text-field/text-field.scss

@@ -44,13 +44,30 @@ $low-ink-color: --_low-ink-color;
 		#{variables.$text-field-icon-size}: calc(
 			#{size.$vvd-size-normal} / 2
 		); // default of 20px
+		#{variables.$text-field-block-size}: #{size.$vvd-size-normal};
+		#{variables.$text-field-border-radius}: #{border-radius-variables.$border-radius-normal};
+		#{variables.$text-field-pill-border-radius}: #{border-radius-variables.$border-radius-extra-expanded};
 
 		display: inline-grid;
 		width: 100%;
 		gap: 4px;
 		grid-template-columns: min-content 1fr max-content;
 	}
 
+	&.size-condensed {
+		#{variables.$text-field-gutter-start}: calc(
+			#{size.$vvd-size-super-condensed} / 2
+		); // default of 12px
+		#{variables.$text-field-gutter-end}: calc(
+			#{size.$vvd-size-super-condensed} / 2
+		); // default of 12px
+		#{variables.$text-field-icon-size}: calc(
+			#{size.$vvd-size-condensed} / 2
+		); // default of 16px
+		#{variables.$text-field-block-size}: #{size.$vvd-size-condensed};
+		#{variables.$text-field-border-radius}: #{border-radius-variables.$border-radius-semi-condensed};
+	}
+
 	@supports (user-select: none) {
 		user-select: none;
 	}
@@ -114,16 +131,16 @@ $low-ink-color: --_low-ink-color;
 	}
 
 	.base > & {
-		block-size: #{size.$vvd-size-normal};
+		block-size: var(#{variables.$text-field-block-size});
 	}
 
 	/* Shape */
 	.base:not(.shape-pill) & {
-		border-radius: #{border-radius-variables.$border-radius-normal};
+		border-radius: var(#{variables.$text-field-border-radius});
 	}
 
 	.base.shape-pill & {
-		border-radius: #{border-radius-variables.$border-radius-extra-expanded};
+		border-radius: var(#{variables.$text-field-pill-border-radius});
 	}
 }
 

libs/components/src/lib/text-field/text-field.spec.ts

@@ -8,6 +8,7 @@ import {
 } from '@vivid-nx/shared';
 import { TextFieldType } from '@microsoft/fast-foundation';
 import { Icon } from '../icon/icon';
+import { Size } from '../enums';
 import { TextField } from './text-field';
 import '.';
 
@@ -60,6 +61,45 @@ describe('vwc-text-field', () => {
 		});
 	});
 
+	describe('scale', () => {
+		function hasSizeClass(baseElement: HTMLElement) {
+			return Array.from(baseElement.classList).some((className) => {
+				return className.includes('size-');
+			});
+		}
+
+		it('should reflect the property as an attribute', async () => {
+			element.scale = Size.Condensed;
+			await elementUpdated(element);
+			expect(element.getAttribute('scale')).toBe(Size.Condensed);
+		});
+
+		it('should reflect the attribute as a property', async () => {
+			element.setAttribute('scale', Size.Condensed);
+			await elementUpdated(element);
+			expect(element.scale).toBe(Size.Condensed);
+		});
+
+		it('should init without a size class on base element', async () => {
+			expect(hasSizeClass(getBaseElement(element))).toBe(false);
+		});
+		it('should set size class on base element', async () => {
+			element.scale = Size.Condensed;
+			await elementUpdated(element);
+			expect(getBaseElement(element).classList.contains('size-condensed')).toBe(
+				true
+			);
+		});
+
+		it('should remove size class from base element', async () => {
+			element.scale = Size.Condensed;
+			await elementUpdated(element);
+			element.scale = undefined;
+			await elementUpdated(element);
+			expect(hasSizeClass(getBaseElement(element))).toBe(false);
+		});
+	});
+
 	describe('label', function () {
 		it('should set a label if label is set', async function () {
 			const labelText = 'label';

libs/components/src/lib/text-field/text-field.template.ts

@@ -22,6 +22,7 @@ const getStateClasses = ({
 	actionItemsSlottedContent,
 	leadingActionItemsSlottedContent,
 	icon,
+	scale,
 }: TextField) =>
 	classNames(
 		['error', Boolean(errorValidationMessage)],
@@ -36,7 +37,8 @@ const getStateClasses = ({
 		['success', Boolean(successText)],
 		['action-items', !!actionItemsSlottedContent?.length],
 		['leading-action-items', !!leadingActionItemsSlottedContent?.length],
-		['no-leading', !(leadingActionItemsSlottedContent?.length || icon)]
+		['no-leading', !(leadingActionItemsSlottedContent?.length || icon)],
+		[`size-${scale}`, Boolean(scale)]
 	);
 
 /**

libs/components/src/lib/text-field/text-field.ts

@@ -1,7 +1,7 @@
 import { TextField as FoundationTextfield } from '@microsoft/fast-foundation';
 import { attr, observable } from '@microsoft/fast-element';
 import { memoizeWith } from 'ramda';
-import type { Appearance, Shape } from '../enums';
+import type { Appearance, Shape, Size } from '../enums';
 import {
 	AffixIcon,
 	type ErrorText,
@@ -22,6 +22,8 @@ export type TextFieldAppearance = Extract<
 >;
 export type TextFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 
+export type TextFieldSize = Extract<Size, Size.Condensed | Size.Normal>;
+
 // Safari does not support styling the `::placeholder` pseudo-element on slotted input
 // See bug: https://bugs.webkit.org/show_bug.cgi?id=223814
 // As a workaround we add a stylesheet to root of text-field to apply the styles
@@ -84,6 +86,15 @@ export class TextField extends FoundationTextfield {
 	@attr shape?: TextFieldShape;
 	@attr autoComplete?: string;
 
+	/**
+	 * The size the text-field should have.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: size
+	 */
+	@attr() scale?: TextFieldSize;
+
 	/**
 	 *
 	 * Slot observer:

libs/components/src/lib/text-field/ui.test.ts

@@ -48,6 +48,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 			</div>
 			</vwc-layout>
 		</form>
+		<vwc-text-field icon="search-line" label="Condensed" current-value="value" scale="condensed"></vwc-text-field>
 	</div>
 	`;