feat(textarea-skeleton): new hide-label attribute

Author: maradwan26

packages/web-components/src/components/textarea/__tests__/textarea-test.js

@@ -124,6 +124,29 @@ describe('cds-textarea', () => {
     expect(skeleton).to.exist;
   });
 
+  it('should support hide-label on skeleton variant', async () => {
+    const el = await fixture(html`
+      <cds-textarea-skeleton></cds-textarea-skeleton>
+    `);
+
+    await el.updateComplete;
+
+    const label = el.shadowRoot?.querySelector(`.cds--label.cds--skeleton`);
+    expect(label).to.exist;
+
+    const elHiddenLabel = await fixture(html`
+      <cds-textarea-skeleton hide-label></cds-textarea-skeleton>
+    `);
+
+    await elHiddenLabel.updateComplete;
+
+    // label should not render when hide-label is true
+    const hiddenLabel = elHiddenLabel.shadowRoot?.querySelector(
+      `.cds--label.cds--skeleton`
+    );
+    expect(hiddenLabel).to.not.exist;
+  });
+
   it('should be accessible', async () => {
     const el = await fixture(html`
       <cds-textarea

packages/web-components/src/components/textarea/textarea-skeleton.ts

@@ -1,11 +1,12 @@
 /**
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import styles from './textarea.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
@@ -17,9 +18,18 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
  */
 @customElement(`${prefix}-textarea-skeleton`)
 class CDSTextareaSkeleton extends LitElement {
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })
+  hideLabel = false;
+
   render() {
+    const { hideLabel } = this;
     return html`
-      <span class="${prefix}--label ${prefix}--skeleton"></span>
+      ${hideLabel
+        ? ''
+        : html`<span class="${prefix}--label ${prefix}--skeleton"></span>`}
       <div class="${prefix}--skeleton ${prefix}--text-area"></div>
     `;
   }

packages/web-components/src/components/textarea/textarea.stories.ts

@@ -191,12 +191,19 @@ export const Default = {
 };
 
 export const Skeleton = {
+  args,
+  argTypes,
   parameters: {
     percy: {
       skip: true,
     },
+    controls: {
+      include: ['hideLabel'],
+    },
   },
-  render: () => html` <cds-textarea-skeleton></cds-textarea-skeleton> `,
+  render: ({ hideLabel }) => html`
+    <cds-textarea-skeleton ?hide-label=${hideLabel}></cds-textarea-skeleton>
+  `,
 };
 
 export const WithAILabel = {