feat: input-date: remove empty-text [GAUD-7027] (#5024)

* feat: input-date: remove empty-text * Updating vdiff goldens (#5025) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
BrightspaceUI · Sep 30, 2024 · 3e3d9fb · 3e3d9fb
1 parent d00fa5c
commit 3e3d9fb
Show file tree

Hide file tree

Showing 7 changed files with 2 additions and 40 deletions.
diff --git a/components/inputs/demo/input-date.html b/components/inputs/demo/input-date.html
@@ -47,13 +47,6 @@ <h2>Disabled</h2>
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Empty Text</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-input-date label="Reminder Date" empty-text="No reminder date ever entered"></d2l-input-date>
-				</template>
-			</d2l-demo-snippet>
-
 			<h2>Required</h2>
 			<d2l-demo-snippet>
 				<template>

diff --git a/components/inputs/docs/input-date-time.md b/components/inputs/docs/input-date-time.md
@@ -47,7 +47,6 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
 |--|--|--|
 | `label` | String, **required** | Accessible label for the input |
 | `disabled` | Boolean | Disables the input |
-| `empty-text` | String | Text to reassure users that they can choose not to provide a value in this field (usually not necessary) |
 | `label-hidden` | Boolean | Hides the label visually (moves it to the input's `aria-label` attribute) |
 | `labelled-by` | String | HTML id of an element in the same shadow root which acts as the input's label |
 | `max-value` | String | Maximum valid date that could be selected by a user. |

diff --git a/components/inputs/input-date.js b/components/inputs/input-date.js
@@ -38,11 +38,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			 * @type {boolean}
 			 */
 			disabled: { type: Boolean },
-			/**
-			 * ADVANCED: Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)
-			 * @type {string}
-			 */
-			emptyText: { type: String, attribute: 'empty-text' },
 			/**
 			 * @ignore
 			 * Optionally add a 'Now' button to be used in date-time pickers only.
@@ -149,7 +144,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		super();
 
 		this.disabled = false;
-		this.emptyText = '';
 		/** @ignore */
 		this.hasNow = false;
 		this.labelHidden = false;
@@ -224,8 +218,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			this.updateComplete.then(() => tryUpdateHiddenContentWidth());
 		});
 
-		this._formattedValue = this.emptyText ? this.emptyText : '';
-
 		await (document.fonts ? document.fonts.ready : Promise.resolve());
 
 		// resize observer needed to handle case where it's initially hidden
@@ -283,7 +275,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			<div aria-hidden="true" class="d2l-input-date-hidden-text">
 				<div>${formattedWideDate}</div>
 				<div>${shortDateFormat}</div>
-				<div>${this.emptyText}</div>
 			</div>
 			${errorTooltip}
 			<d2l-dropdown ?disabled="${this.disabled || this.skeleton}" no-auto-open ?prefer-fixed-positioning="${this.preferFixedPositioning}">
@@ -294,7 +285,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 					@change="${this._handleChange}"
 					class="d2l-dropdown-opener vdiff-target"
 					instructions="${ifDefined((this._showInfoTooltip && !errorTooltip && !this.invalid && this.childErrors.size === 0 && this._inputTextFocusShowTooltip) ? this.localize(`${this._namespace}.openInstructions`, { format: shortDateFormat }) : undefined)}"
-					description="${ifDefined(this.emptyText ? this.emptyText : undefined)}"
 					?disabled="${this.disabled}"
 					@focus="${this._handleInputTextFocus}"
 					@keydown="${this._handleKeydown}"
@@ -361,7 +351,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 
 	_handleBlur() {
 		this._showInfoTooltip = true;
-		this._setFormattedValue(); // needed for case with empty text click on input-text then blur
 		this.requestValidate(true);
 	}
 
@@ -528,7 +517,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 	}
 
 	_setFormattedValue() {
-		this._formattedValue = this._shownValue ? formatISODateInUserCalDescriptor(this._shownValue) : (this.emptyText ? this.emptyText : '');
+		this._formattedValue = this._shownValue ? formatISODateInUserCalDescriptor(this._shownValue) : '';
 	}
 
 	async _updateValueDispatchEvent(dateInISO, setToNow) {

diff --git a/components/inputs/test/golden/input-date/chromium/empty-text-focus.png b/components/inputs/test/golden/input-date/chromium/empty-text-focus.png
diff --git a/components/inputs/test/golden/input-date/chromium/empty-text.png b/components/inputs/test/golden/input-date/chromium/empty-text.png
diff --git a/components/inputs/test/input-date.test.js b/components/inputs/test/input-date.test.js
@@ -21,21 +21,6 @@ describe('d2l-input-date', () => {
 	const documentLocaleSettings = getDocumentLocaleSettings();
 	documentLocaleSettings.timezone.identifier = 'America/Toronto';
 
-	describe('accessibility', () => {
-
-		it('should set description when empty-text', async() => {
-			const elem = await fixture('<d2l-input-date empty-text="text description" label="label text"></d2l-input-date>');
-			const input = getChildElem(elem, 'd2l-input-text');
-			expect(input.getAttribute('description')).to.equal('text description');
-		});
-
-		it('should not set description when no empty-text', async() => {
-			const elem = await fixture(basicFixture);
-			const input = getChildElem(elem, 'd2l-input-text');
-			expect(input.hasAttribute('description')).to.be.false;
-		});
-	});
-
 	describe('constructor', () => {
 
 		it('should construct', () => {

diff --git a/components/inputs/test/input-date.vdiff.js b/components/inputs/test/input-date.vdiff.js
@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { inlineHelpFixtures } from './input-shared-content.js';
 
 const create = (opts = {}) => {
-	const { disabled, emptyText, label, labelHidden, maxValue, minValue, opened, required, skeleton, value } = {
+	const { disabled, label, labelHidden, maxValue, minValue, opened, required, skeleton, value } = {
 		disabled: false,
 		label: 'Start Date',
 		labelHidden: true,
@@ -17,7 +17,6 @@ const create = (opts = {}) => {
 	return html`
 		<d2l-input-date
 			?disabled="${disabled}"
-			empty-text="${ifDefined(emptyText)}"
 			label="${label}"
 			?label-hidden="${labelHidden}"
 			max-value="${ifDefined(maxValue)}"
@@ -31,7 +30,6 @@ const create = (opts = {}) => {
 };
 
 const disabledFixture = create({ disabled: true, value: '1990-01-01' });
-const emptyTextFixture = create({ emptyText: 'No reminder date ever entered' });
 const labelFixture = create({ labelHidden: false, value: '2019-03-02' });
 const labelHiddenFixture = create({ value: '2020-12-30' });
 const minMaxFixture = create({ maxValue: '2018-02-27', minValue: '2018-02-13' });
@@ -48,8 +46,6 @@ describe('d2l-input-date', () => {
 
 	[
 		{ name: 'disabled', template: disabledFixture },
-		{ name: 'empty-text', template: emptyTextFixture },
-		{ name: 'empty-text-focus', template: emptyTextFixture, focus: true },
 		{ name: 'label', template: labelFixture },
 		{ name: 'label-hidden', template: labelHiddenFixture },
 		{ name: 'placeholder', template: placeholderFixture },