Merge branch 'main' into fix/ai-label-test-branch

.github/codecov.yml

@@ -0,0 +1,62 @@
+coverage:
+  status:
+    project:
+      default:
+        informational: true
+    patch:
+      default:
+        informational: true
+
+component_management:
+  default_rules: # default rules that will be inherited by all components
+    statuses:
+      - type: project # in this case every component that doens't have a status defined will have a project type one
+        target: auto
+        threshold: 1%
+        branches:
+          - '!main'
+  individual_components:
+    - component_id: colors
+      name: colors
+      paths:
+        - ../packages/colors/**
+    - component_id: feature-flags
+      name: feature-flags
+      paths:
+        - ../packages/feature-flags/**
+    - component_id: icon-build-helpers
+      name: icon-build-helpers
+      paths:
+        - ../packages/icon-build-helpers/**
+    - component_id: layout
+      name: layout
+      paths:
+        - ../packages/layout/**
+    - component_id: motion
+      name: motion
+      paths:
+        - ../packages/motion/**
+    - component_id: react # this is an identifier that should not be changed
+      name: react # this is a display name, and can be changed freely
+      paths:
+        - ../packages/react/**
+    - component_id: scss-generator
+      name: scss-generator
+      paths:
+        - ../packages/scss-generator/**
+    - component_id: test-utils
+      name: test-utils
+      paths:
+        - ../packages/test-utils/**
+    - component_id: themes
+      name: themes
+      paths:
+        - ../packages/themes/**
+    - component_id: type
+      name: type
+      paths:
+        - ../packages/type/**
+    - component_id: upgrade
+      name: upgrade
+      paths:
+        - ../packages/upgrade/**

.github/workflows/ci.yml

@@ -79,8 +79,11 @@ jobs:
         run: |
           yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures|compat)/**' 'packages/**/*.scss'
       - name: Run tests
-        run: yarn test --ci
-
+        run: yarn test --ci --collectCoverage
+      - name: Upload coverage reports to Codecov with GitHub Action
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
   e2e:
     name: 'test:e2e'
     runs-on: ubuntu-latest

packages/react/src/components/Accordion/Accordion.tsx

@@ -8,7 +8,7 @@
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import PropTypes from 'prop-types';
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import { AccordionProvider } from './AccordionProvider';
 
 export interface AccordionProps {
@@ -24,6 +24,11 @@ export interface AccordionProps {
    */
   className?: string;
 
+  /**
+   * Pass in the children that will be rendered within the Accordion
+   */
+  children?: ReactNode;
+
   /**
    * Specify whether an individual AccordionItem
    * should be disabled.

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

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm/FormContext';
+
+export interface FluidTextAreaSkeletonProps {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className?: string;
+}
+
+function FluidTextAreaSkeleton({ 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>
+    );
+  };
+}
+
+FluidTextAreaSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+};
+
+export default FluidTextAreaSkeleton;

packages/react/src/components/FluidTextArea/FluidTextArea.js → packages/react/src/components/FluidTextArea/FluidTextArea.tsx

@@ -13,7 +13,117 @@ import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 
-function FluidTextArea({ className, ...other }) {
+export interface FluidTextAreaProps {
+  /**
+   * Provide a custom className that is applied directly to the underlying
+   * `<textarea>` node
+   */
+  className?: string;
+
+  /**
+   * Specify the `cols` attribute for the underlying `<textarea>` node
+   */
+  cols?: number;
+
+  /**
+   * Optionally provide the default value of the `<textarea>`
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter?: boolean;
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText?: React.ReactNode;
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Provide a unique identifier for the control
+   */
+  id?: string;
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText?: React.ReactNode;
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: React.ReactNode;
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
+   */
+  light?: boolean;
+
+  /**
+   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   */
+  maxCount?: number;
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<textarea>`
+   * is updated
+   */
+  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<textarea>` is clicked
+   */
+  onClick?: React.MouseEventHandler<HTMLTextAreaElement>;
+
+  /**
+   * Specify the placeholder attribute for the `<textarea>`
+   */
+  placeholder?: string;
+
+  /**
+   * Specify the rows attribute for the `<textarea>`
+   */
+  rows?: number;
+
+  /**
+   * Provide the current value of the `<textarea>`
+   */
+  value?: string | number;
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn?: boolean;
+
+  /**
+   *  Provide the text that is displayed when the control is in warning state
+   */
+  warnText?: React.ReactNode;
+}
+
+const FluidTextArea: React.FC<FluidTextAreaProps> = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = classnames(`${prefix}--text-area--fluid`, className);
 
@@ -22,7 +132,7 @@ function FluidTextArea({ className, ...other }) {
       <TextArea className={classNames} {...other} />
     </FormContext.Provider>
   );
-}
+};
 
 FluidTextArea.propTypes = {
   /**

packages/react/src/components/FluidTextArea/index.js → packages/react/src/components/FluidTextArea/index.tsx

@@ -6,7 +6,12 @@
  */
 
 import FluidTextArea from './FluidTextArea';
-
+import { type FluidTextAreaProps } from './FluidTextArea';
+import { type FluidTextAreaSkeletonProps } from './FluidTextArea.Skeleton';
 export default FluidTextArea;
-export { FluidTextArea };
+export {
+  FluidTextArea,
+  type FluidTextAreaProps,
+  type FluidTextAreaSkeletonProps,
+};
 export { default as FluidTextAreaSkeleton } from './FluidTextArea.Skeleton';

packages/react/src/components/Tag/InteractiveTag.stories.js

@@ -28,7 +28,7 @@ export default {
 
 export const Selectable = (args) => {
   return (
-    <>
+    <div aria-label="Selectable tags" role="group">
       <SelectableTag
         renderIcon={Asleep}
         text="Tag content with a long text description"
@@ -41,7 +41,7 @@ export const Selectable = (args) => {
         className="some-class"
         {...args}
       />
-    </>
+    </div>
   );
 };
 
@@ -93,7 +93,10 @@ export const Operational = (args) => {
 
   return (
     <>
-      <div style={{ marginBottom: '1rem' }}>
+      <div
+        aria-label="Operational tags"
+        role="group"
+        style={{ marginBottom: '1rem' }}>
         <OperationalTag
           type="red"
           className="some-class"
@@ -173,7 +176,9 @@ export const Operational = (args) => {
           display: 'flex',
           justifyContent: 'flex-start',
           marginTop: '1rem',
-        }}>
+        }}
+        aria-label="Operational tags with Popover"
+        role="group">
         {/* High contrast example */}
         <Popover open={openHighContrast} highContrast>
           <OperationalTag
@@ -295,7 +300,7 @@ Operational.argTypes = {
 
 export const Dismissible = (args) => {
   return (
-    <>
+    <div aria-label="Dismissible tags" role="group">
       <DismissibleTag
         type="red"
         className="some-class"
@@ -380,7 +385,7 @@ export const Dismissible = (args) => {
         text="Tag content"
         {...args}
       />
-    </>
+    </div>
   );
 };