Hide the label when no default slotted content is present

microsoft · May 15, 2024 · 3f8fe39 · 3f8fe39
1 parent b693f9f
commit 3f8fe39
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 11 deletions.
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -2803,9 +2803,13 @@ export class TextInput extends FASTElement {
     connectedCallback(): void;
     // @internal
     control: HTMLInputElement;
+    // @internal
+    controlLabel: HTMLLabelElement;
     controlSize?: TextInputControlSize;
     // @internal
     defaultSlottedNodes: Node[];
+    // @internal
+    defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
     dirname?: string;
     disabled?: boolean;
     // (undocumented)

diff --git a/packages/web-components/src/text-input/text-input.spec.ts b/packages/web-components/src/text-input/text-input.spec.ts
@@ -272,7 +272,7 @@ test.describe('TextInput', () => {
       <fluent-text-input></fluent-text-input>
     `);
 
-    await expect(label).toHaveClass(/label__hidden/);
+    await expect(label).toBeHidden();
   });
 
   test('should hide the label when start content is provided', async ({ page }) => {
@@ -285,7 +285,7 @@ test.describe('TextInput', () => {
       </fluent-text-input>
     `);
 
-    await expect(label).toHaveClass(/label__hidden/);
+    await expect(label).toBeHidden();
   });
 
   test('should hide the label when end content is provided', async ({ page }) => {
@@ -298,7 +298,7 @@ test.describe('TextInput', () => {
       </fluent-text-input>
     `);
 
-    await expect(label).toHaveClass(/label__hidden/);
+    await expect(label).toBeHidden();
   });
 
   test('should hide the label when start and end content are provided', async ({ page }) => {
@@ -312,7 +312,7 @@ test.describe('TextInput', () => {
       </fluent-text-input>
     `);
 
-    await expect(label).toHaveClass(/label__hidden/);
+    await expect(label).toBeHidden();
   });
 
   test('should hide the label when space-only text nodes are slotted', async ({ page }) => {
@@ -323,7 +323,7 @@ test.describe('TextInput', () => {
 
     await expect(element).toHaveText(/\n\s\n/);
 
-    await expect(label).toHaveClass(/label__hidden/);
+    await expect(label).toBeHidden();
   });
 
   test('should fire a `change` event when the internal control emits a `change` event', async ({ page }) => {

diff --git a/packages/web-components/src/text-input/text-input.stories.ts b/packages/web-components/src/text-input/text-input.stories.ts
@@ -254,3 +254,9 @@ export const Required: Story<FluentTextInput> = renderComponent(html<StoryArgs<F
     <button type="submit">Submit</button>
   </form>
 `);
+
+export const WithoutLabel: Story<FluentTextInput> = renderComponent(html<StoryArgs<FluentTextInput>>`
+  <fluent-text-input>
+    <span slot="end">${Person20Regular}</span>
+  </fluent-text-input>
+`);
diff --git a/packages/web-components/src/text-input/text-input.styles.ts b/packages/web-components/src/text-input/text-input.styles.ts
@@ -70,9 +70,12 @@ export const styles: ElementStyles = css`
     flex-shrink: 0;
     padding-inline-end: ${spacingHorizontalXS};
   }
-  .label__hidden {
+
+  .label[hidden],
+  :host(:empty) .label {
     display: none;
   }
+
   .root {
     position: relative;
     box-sizing: border-box;

diff --git a/packages/web-components/src/text-input/text-input.template.ts b/packages/web-components/src/text-input/text-input.template.ts
@@ -12,11 +12,7 @@ import type { TextInputOptions } from './text-input.options.js';
  */
 export function textInputTemplate<T extends TextInput>(options: TextInputOptions = {}): ElementViewTemplate<T> {
   return html<T>`
-    <label
-      part="label"
-      for="control"
-      class="${x => (x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label__hidden')}"
-    >
+    <label part="label" for="control" class="label" ${ref('controlLabel')}>
       <slot
         ${slotted({
           property: 'defaultSlottedNodes',

diff --git a/packages/web-components/src/text-input/text-input.ts b/packages/web-components/src/text-input/text-input.ts
@@ -70,6 +70,17 @@ export class TextInput extends FASTElement {
   @observable
   public defaultSlottedNodes!: Node[];
 
+  /**
+   * Updates the control label visibility based on the presence of default slotted content.
+   *
+   * @internal
+   */
+  public defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void {
+    if (this.$fastController.isConnected) {
+      this.controlLabel.hidden = !next?.length;
+    }
+  }
+
   /**
    * Sets the directionality of the element to be submitted with form data.
    * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/dirname | `dirname`} attribute
@@ -295,6 +306,14 @@ export class TextInput extends FASTElement {
    */
   public control!: HTMLInputElement;
 
+  /**
+   * A reference to the internal label element.
+   *
+   * @internal
+   */
+  @observable
+  public controlLabel!: HTMLLabelElement;
+
   /**
    * Indicates that the value has been changed by the user.
    *