test(fluid-components): increase coverage and fix skeleton components (…

…#17823)

packages/react/src/components/FluidComboBox/FluidComboBox.Skeleton.tsx

@@ -22,15 +22,11 @@ const FluidComboBoxSkeleton: React.FC<FluidComboBoxSkeletonProps> = ({
   ...rest
 }) => {
   const prefix = usePrefix();
-  const wrapperClasses = cx(
-    className,
-    `${prefix}--skeleton`,
-    `${prefix}--list-box`
-  );
+  const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
 
   return (
-    <div className={`${prefix}--list-box__wrapper--fluid`}>
-      <div className={wrapperClasses} {...rest}>
+    <div className={wrapperClasses} {...rest}>
+      <div className={`${prefix}--skeleton ${prefix}--list-box`}>
         <span className={`${prefix}--list-box__label`} />
         <div className={`${prefix}--list-box__field`} />
       </div>

packages/react/src/components/FluidComboBox/__tests__/FluidComboBoxSkeleton-test.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import { generateItems, generateGenericItem } from '../../ListBox/test-helpers';
+import FluidComboBoxSkeleton from '../FluidComboBox.Skeleton';
+
+describe('FluidComboBoxSkeleton', () => {
+  it('should render with fluid classes', async () => {
+    const items = generateItems(4, generateGenericItem);
+    const { container } = render(<FluidComboBoxSkeleton />);
+    expect(container.firstChild).toHaveClass(`cds--list-box__wrapper--fluid`);
+  });
+
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<FluidComboBoxSkeleton className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+});

packages/react/src/components/FluidDropdown/FluidDropdown.Skeleton.tsx

@@ -22,15 +22,11 @@ const FluidDropdownSkeleton: React.FC<FluidDropdownSkeletonProps> = ({
   ...rest
 }) => {
   const prefix = usePrefix();
-  const wrapperContainerClasses = cx(
-    className,
-    `${prefix}--list-box__wrapper--fluid`
-  );
-  const wrapperClasses = cx(`${prefix}--skeleton`, `${prefix}--list-box`);
+  const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
 
   return (
-    <div className={wrapperContainerClasses}>
-      <div className={wrapperClasses} {...rest}>
+    <div className={wrapperClasses} {...rest}>
+      <div className={`${prefix}--skeleton ${prefix}--list-box`}>
         <span className={`${prefix}--list-box__label`} />
         <div className={`${prefix}--list-box__field`} />
       </div>

packages/react/src/components/FluidDropdown/__tests__/FluidDropdownSkeleton-test.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import { generateItems, generateGenericItem } from '../../ListBox/test-helpers';
+import FluidDropdownSkeleton from '../FluidDropdown.Skeleton';
+
+describe('FluidDropdownSkeleton', () => {
+  it('should render with fluid classes', async () => {
+    const items = generateItems(4, generateGenericItem);
+    const { container } = render(<FluidDropdownSkeleton />);
+    expect(container.firstChild).toHaveClass(`cds--list-box__wrapper--fluid`);
+  });
+
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<FluidDropdownSkeleton className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+});

packages/react/src/components/FluidMultiSelect/FluidMultiSelect.Skeleton.tsx

@@ -22,15 +22,11 @@ const FluidMultiSelectSkeleton: React.FC<FluidMultiSelectSkeletonProps> = ({
   ...rest
 }) => {
   const prefix = usePrefix();
-  const wrapperClasses = cx(
-    className,
-    `${prefix}--skeleton`,
-    `${prefix}--list-box`
-  );
+  const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
 
   return (
-    <div className={`${prefix}--list-box__wrapper--fluid`}>
-      <div className={wrapperClasses} {...rest}>
+    <div className={wrapperClasses} {...rest}>
+      <div className={`${prefix}--skeleton ${prefix}--list-box`}>
         <span className={`${prefix}--list-box__label`} />
         <div className={`${prefix}--list-box__field`} />
       </div>

packages/react/src/components/FluidMultiSelect/__tests__/FluidMultiSelect-test.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import { generateItems, generateGenericItem } from '../../ListBox/test-helpers';
+import FluidMultiSelect from '../FluidMultiSelect';
+
+describe('FluidMultiSelect', () => {
+  it('should render with fluid classes', async () => {
+    const items = generateItems(4, generateGenericItem);
+    const { container } = render(
+      <FluidMultiSelect id="test" label="Field" items={items} />
+    );
+    expect(container.firstChild).toHaveClass(`cds--list-box__wrapper--fluid`);
+  });
+});

packages/react/src/components/FluidMultiSelect/__tests__/FluidMultiSelectSkeleton-test.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import { generateItems, generateGenericItem } from '../../ListBox/test-helpers';
+import FluidMultiSelectSkeleton from '../FluidMultiSelect.Skeleton';
+
+describe('FluidMultiSelectSkeleton', () => {
+  it('should render with fluid classes', async () => {
+    const items = generateItems(4, generateGenericItem);
+    const { container } = render(
+      <FluidMultiSelectSkeleton id="test" label="Field" items={items} />
+    );
+    expect(container.firstChild).toHaveClass(`cds--list-box__wrapper--fluid`);
+  });
+
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<FluidMultiSelectSkeleton className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+});

packages/react/src/components/FluidSelect/FluidSelect.Skeleton.tsx

@@ -21,15 +21,11 @@ const FluidSelectSkeleton: React.FC<FluidSelectSkeletonProps> = ({
   ...rest
 }) => {
   const prefix = usePrefix();
-  const wrapperClasses = cx(
-    className,
-    `${prefix}--skeleton`,
-    `${prefix}--list-box`
-  );
+  const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
 
   return (
-    <div className={`${prefix}--list-box__wrapper--fluid`}>
-      <div className={wrapperClasses} {...rest}>
+    <div className={wrapperClasses} {...rest}>
+      <div className={`${prefix}--skeleton ${prefix}--list-box`}>
         <span className={`${prefix}--list-box__label`} />
         <div className={`${prefix}--list-box__field`} />
       </div>

packages/react/src/components/FluidSelect/__tests__/FluidSelectSkeleton-test.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import { generateItems, generateGenericItem } from '../../ListBox/test-helpers';
+import FluidSelectSkeleton from '../FluidSelect.Skeleton';
+
+describe('FluidSelectSkeleton', () => {
+  it('should render with fluid classes', async () => {
+    const items = generateItems(4, generateGenericItem);
+    const { container } = render(<FluidSelectSkeleton />);
+    expect(container.firstChild).toHaveClass(`cds--list-box__wrapper--fluid`);
+  });
+
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<FluidSelectSkeleton className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+});

packages/react/src/components/FluidTextArea/FluidTextArea.Skeleton.tsx

@@ -11,30 +11,26 @@ export interface FluidTextAreaSkeletonProps {
   className?: string;
 }
 
-function FluidTextAreaSkeleton({ className, ...other }) {
+const FluidTextAreaSkeleton: React.FC<FluidTextAreaSkeletonProps> = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
 
-  const FluidTextAreaSkeleton: React.FC<FluidTextAreaSkeletonProps> = ({
-    className,
-    ...other
-  }) => {
-    const prefix = usePrefix();
-
-    return (
-      <FormContext.Provider value={{ isFluid: true }}>
-        <div
-          className={classnames(
-            `${prefix}--form-item ${prefix}--text-area--fluid__skeleton`,
-            className
-          )}
-          {...other}>
-          <span className={`${prefix}--label ${prefix}--skeleton`} />
-          <div className={`${prefix}--skeleton ${prefix}--text-area`} />
-        </div>
-      </FormContext.Provider>
-    );
-  };
-}
+  return (
+    <FormContext.Provider value={{ isFluid: true }}>
+      <div
+        className={classnames(
+          `${prefix}--form-item ${prefix}--text-area--fluid__skeleton`,
+          className
+        )}
+        {...other}>
+        <span className={`${prefix}--label ${prefix}--skeleton`} />
+        <div className={`${prefix}--skeleton ${prefix}--text-area`} />
+      </div>
+    </FormContext.Provider>
+  );
+};
 
 FluidTextAreaSkeleton.propTypes = {
   /**

packages/react/src/components/FluidTextArea/__tests__/FluidTextAreaSkeleton-test.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import FluidTextAreaSkeleton from '../FluidTextArea.Skeleton';
+
+describe('FluidTextAreaSkeleton', () => {
+  it('should render with fluid classes', async () => {
+    const { container } = render(<FluidTextAreaSkeleton />);
+    expect(container.firstChild).toHaveClass(`cds--text-area--fluid__skeleton`);
+  });
+
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<FluidTextAreaSkeleton className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+});

packages/react/src/components/FluidTextInput/__tests__/FluidPasswordInput-test.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import { generateItems, generateGenericItem } from '../../ListBox/test-helpers';
+import FluidPasswordInput from '../FluidPasswordInput';
+
+describe('FluidPasswordInput', () => {
+  it('should render with fluid classes', async () => {
+    const items = generateItems(4, generateGenericItem);
+    const { container } = render(
+      <FluidPasswordInput id="input-1" labelText="PasswordInput label" />
+    );
+    expect(container.firstChild).toHaveClass(`cds--text-input--fluid`);
+  });
+});

packages/react/src/components/FluidTextInput/__tests__/FluidTextInputSkeleton-test.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import FluidTextInputSkeleton from '../FluidTextInput.Skeleton';
+
+describe('FluidTextInputSkeleton', () => {
+  it('should render with fluid classes', async () => {
+    const { container } = render(<FluidTextInputSkeleton />);
+    expect(container.firstChild).toHaveClass(
+      `cds--text-input--fluid__skeleton`
+    );
+  });
+
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<FluidTextInputSkeleton className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+});

packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -261,6 +261,8 @@
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--skeleton
     .#{$prefix}--list-box__field {
+    @include skeleton;
+
     position: absolute;
     padding: 0;
     block-size: convert.to-rem(8px);
@@ -272,23 +274,15 @@
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--skeleton
     .#{$prefix}--list-box__label {
+    @include skeleton;
+
     position: absolute;
     block-size: convert.to-rem(8px);
     inline-size: 25%;
     inset-block-start: $spacing-05;
     inset-inline-start: $spacing-05;
   }
 
-  .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--skeleton
-    .#{$prefix}--list-box__field,
-  .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--skeleton
-    .#{$prefix}--list-box__label {
-    animation: 3000ms ease-in-out skeleton infinite;
-    background: $skeleton-element;
-  }
-
   // Slug styles
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--slug {