feat(number-field): scale condensed (VIV-1835) (#1906)

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

@@ -134,6 +134,18 @@ If provided, `success-text` will take precedence over errors.
 ></vwc-number-field>
 ```
 
+### Scale
+
+Use the `scale` attribute to change the number field's size.
+
+- Type: `'condensed'` | `'normal'`
+- Default: `'normal'`
+
+```html preview blocks
+<vwc-number-field label="Condensed" scale="condensed"></vwc-number-field>
+<vwc-number-field label="Normal" scale="normal"></vwc-number-field>
+```
+
 ### Shape
 
 Use the `shape` attribute to change the number field's edges.

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

@@ -10,7 +10,7 @@ import {
 	listenToFormSubmission,
 } from '@vivid-nx/shared';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import { Shape } from '../enums';
+import { Shape, Size } from '../enums';
 import { setLocale } from '../../shared/localization';
 import enUS from '../../locales/en-US';
 import deDE from '../../locales/de-DE';
@@ -48,6 +48,45 @@ describe('vwc-number-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/number-field/number-field.template.ts

@@ -21,6 +21,7 @@ const getStateClasses = ({
 	shape,
 	label,
 	successText,
+	scale,
 }: NumberField) =>
 	classNames(
 		['error', Boolean(errorValidationMessage)],
@@ -31,7 +32,8 @@ const getStateClasses = ({
 		[`appearance-${appearance}`, Boolean(appearance)],
 		[`shape-${shape}`, Boolean(shape)],
 		['no-label', !label],
-		['success', !!successText]
+		['success', !!successText],
+		[`size-${scale}`, Boolean(scale)]
 	);
 
 function renderLabel() {
@@ -65,8 +67,11 @@ function numberControlButtons(context: ElementDefinitionContext) {
 									x.locale.numberField.decrementButtonLabel}
 					            shape="${setControlButtonShape}"
 								type="button"
-					            size="condensed"
-					  					tabindex="${getTabIndex}"
+					            size="${(x) =>
+												x.scale === 'condensed'
+													? 'super-condensed'
+													: 'condensed'}"
+								tabindex="${getTabIndex}"
 					            @click="${(x) => x.stepDown()}"></${buttonTag}>
 				<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
 				<${buttonTag} id="add" icon="plus-line"
@@ -76,8 +81,11 @@ function numberControlButtons(context: ElementDefinitionContext) {
 									x.locale.numberField.incrementButtonLabel}
 					            shape="${setControlButtonShape}"
 								type="button"
-					            size="condensed"
-					  					tabindex="${getTabIndex}"
+					            size="${(x) =>
+												x.scale === 'condensed'
+													? 'super-condensed'
+													: 'condensed'}"
+								tabindex="${getTabIndex}"
 					            @click="${(x) => x.stepUp()}"></${buttonTag}>
 		    </div>
 	`;

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

@@ -6,7 +6,7 @@ import {
 } from '@microsoft/fast-element';
 import { keyArrowDown, keyArrowUp } from '@microsoft/fast-web-utilities';
 import { DelegatesARIATextbox } from '@microsoft/fast-foundation';
-import type { Appearance, Shape } from '../enums';
+import type { Appearance, Shape, Size } from '../enums';
 import {
 	AffixIcon,
 	errorText,
@@ -26,6 +26,7 @@ export type NumberFieldAppearance = Extract<
 	Appearance.Fieldset | Appearance.Ghost
 >;
 export type NumberFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+export type NumberFieldSize = Extract<Size, Size.Condensed | Size.Normal>;
 
 const STEP_DIRECTION = {
 	up: 1,
@@ -135,6 +136,15 @@ export class NumberField extends FormAssociatedNumberField {
 	@attr({ converter: nullableNumberConverter })
 	size!: number;
 
+	/**
+	 * The size the number-field should have.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: size
+	 */
+	@attr() scale?: NumberFieldSize;
+
 	/**
 	 * Amount to increment or decrement the value by
 	 * @public