fix(radio-button): Prevent invalid/warn states when disabled/readonly

packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js

@@ -327,5 +327,121 @@ describe('RadioButtonGroup', () => {
       expect(screen.getByDisplayValue('option-1')).toBeRequired();
       expect(screen.getByDisplayValue('option-2')).toBeRequired();
     });
+
+    describe('Invalid and Warning States', () => {
+      it('should apply invalid class when invalid prop is true', () => {
+        const { container } = render(
+          <RadioButtonGroup
+            invalid={true}
+            invalidText="Invalid selection"
+            name="test"
+            legendText="test">
+            <RadioButton labelText="test-1" value="test-1" />
+            <RadioButton labelText="test-2" value="test-2" />
+          </RadioButtonGroup>
+        );
+
+        const fieldset = container.querySelector('fieldset');
+        expect(fieldset).toHaveClass(`${prefix}--radio-button-group--invalid`);
+        expect(screen.getByText('Invalid selection')).toBeInTheDocument();
+      });
+
+      it('should apply warning class when warn prop is true', () => {
+        const { container } = render(
+          <RadioButtonGroup
+            warn={true}
+            warnText="Warning message"
+            name="test"
+            legendText="test">
+            <RadioButton labelText="test-1" value="test-1" />
+            <RadioButton labelText="test-2" value="test-2" />
+          </RadioButtonGroup>
+        );
+
+        const fieldset = container.querySelector('fieldset');
+        expect(fieldset).toHaveClass(`${prefix}--radio-button-group--warning`);
+        expect(screen.getByText('Warning message')).toBeInTheDocument();
+      });
+
+      it('should not apply invalid class or show invalid text when disabled and invalid', () => {
+        const { container } = render(
+          <RadioButtonGroup
+            disabled={true}
+            invalid={true}
+            invalidText="Invalid selection"
+            name="test"
+            legendText="test">
+            <RadioButton labelText="test-1" value="test-1" />
+            <RadioButton labelText="test-2" value="test-2" />
+          </RadioButtonGroup>
+        );
+
+        const fieldset = container.querySelector('fieldset');
+        expect(fieldset).not.toHaveClass(
+          `${prefix}--radio-button-group--invalid`
+        );
+        expect(screen.queryByText('Invalid selection')).not.toBeInTheDocument();
+      });
+
+      it('should not apply warning class or show warning text when disabled and warn', () => {
+        const { container } = render(
+          <RadioButtonGroup
+            disabled={true}
+            warn={true}
+            warnText="Warning message"
+            name="test"
+            legendText="test">
+            <RadioButton labelText="test-1" value="test-1" />
+            <RadioButton labelText="test-2" value="test-2" />
+          </RadioButtonGroup>
+        );
+
+        const fieldset = container.querySelector('fieldset');
+        expect(fieldset).not.toHaveClass(
+          `${prefix}--radio-button-group--warning`
+        );
+        expect(screen.queryByText('Warning message')).not.toBeInTheDocument();
+      });
+
+      it('should not apply invalid class or show invalid text when readOnly and invalid', () => {
+        const { container } = render(
+          <RadioButtonGroup
+            readOnly={true}
+            invalid={true}
+            invalidText="Invalid selection"
+            name="test"
+            legendText="test">
+            <RadioButton labelText="test-1" value="test-1" />
+            <RadioButton labelText="test-2" value="test-2" />
+          </RadioButtonGroup>
+        );
+
+        const fieldset = container.querySelector('fieldset');
+        expect(fieldset).not.toHaveClass(
+          `${prefix}--radio-button-group--invalid`
+        );
+        expect(screen.queryByText('Invalid selection')).not.toBeInTheDocument();
+      });
+
+      it('should not apply warning class or show warning text when readOnly and warn', () => {
+        const { container } = render(
+          <RadioButtonGroup
+            readOnly={true}
+            warn={true}
+            warnText="Warning message"
+            name="test"
+            legendText="test">
+            <RadioButton labelText="test-1" value="test-1" />
+            <RadioButton labelText="test-2" value="test-2" />
+          </RadioButtonGroup>
+        );
+
+        const fieldset = container.querySelector('fieldset');
+        expect(fieldset).not.toHaveClass(
+          `${prefix}--radio-button-group--warning`
+        );
+        expect(screen.queryByText('Warning message')).not.toBeInTheDocument();
+      });
+    });
   });
 });

packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -218,7 +218,7 @@ const RadioButtonGroup = React.forwardRef(
       }
     }
 
-    const showWarning = !readOnly && !invalid && warn;
+    const showWarning = !readOnly && !disabled && !invalid && warn;
     const showHelper = !invalid && !disabled && !warn;
 
     const wrapperClasses = classNames(`${prefix}--form-item`, className);
@@ -228,7 +228,8 @@ const RadioButtonGroup = React.forwardRef(
         orientation === 'vertical',
       [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
       [`${prefix}--radio-button-group--readonly`]: readOnly,
-      [`${prefix}--radio-button-group--invalid`]: !readOnly && invalid,
+      [`${prefix}--radio-button-group--invalid`]:
+        !readOnly && !disabled && invalid,
       [`${prefix}--radio-button-group--warning`]: showWarning,
       [`${prefix}--radio-button-group--slug`]: slug,
       [`${prefix}--radio-button-group--decorator`]: decorator,
@@ -283,7 +284,7 @@ const RadioButtonGroup = React.forwardRef(
           {getRadioButtons()}
         </fieldset>
         <div className={`${prefix}--radio-button__validation-msg`}>
-          {!readOnly && invalid && (
+          {!readOnly && !disabled && invalid && (
             <>
               <WarningFilled
                 className={`${prefix}--radio-button__invalid-icon`}

packages/web-components/src/components/radio-button/__tests__/radio-button-group-test.js

@@ -169,4 +169,121 @@ describe('cds-radio-button-group', () => {
     expect(rb1?.checked).to.be.false;
     expect(rb2?.checked).to.be.true;
   });
+  describe('Invalid and Warning States', () => {
+    it('should show invalid message when invalid prop is true', async () => {
+      const el = await fixture(html`
+        <cds-radio-button-group invalid invalid-text="Invalid selection">
+          <cds-radio-button value="test-1"></cds-radio-button>
+          <cds-radio-button value="test-2"></cds-radio-button>
+        </cds-radio-button-group>
+      `);
+
+      const invalidMessage = el.shadowRoot?.querySelector(
+        '.cds--form-requirement'
+      );
+      expect(invalidMessage).to.exist;
+      expect(invalidMessage?.textContent).to.contain('Invalid selection');
+
+      const fieldset = el.shadowRoot?.querySelector('fieldset');
+      expect(fieldset?.classList.contains('cds--radio-button-group--invalid'))
+        .to.be.true;
+    });
+
+    it('should show warning message when warn prop is true', async () => {
+      const el = await fixture(html`
+        <cds-radio-button-group warn warn-text="Warning message">
+          <cds-radio-button value="test-1"></cds-radio-button>
+          <cds-radio-button value="test-2"></cds-radio-button>
+        </cds-radio-button-group>
+      `);
+
+      const warnMessage = el.shadowRoot?.querySelector(
+        '.cds--form-requirement'
+      );
+      expect(warnMessage).to.exist;
+      expect(warnMessage?.textContent).to.contain('Warning message');
+
+      const fieldset = el.shadowRoot?.querySelector('fieldset');
+      expect(fieldset?.classList.contains('cds--radio-button-group--warning'))
+        .to.be.true;
+    });
+
+    it('should not show invalid message or class when disabled and invalid', async () => {
+      const el = await fixture(html`
+        <cds-radio-button-group
+          disabled
+          invalid
+          invalid-text="Invalid selection">
+          <cds-radio-button value="test-1"></cds-radio-button>
+          <cds-radio-button value="test-2"></cds-radio-button>
+        </cds-radio-button-group>
+      `);
+
+      const invalidMessage = el.shadowRoot?.querySelector(
+        '.cds--form-requirement'
+      );
+      expect(invalidMessage).to.not.exist;
+
+      const fieldset = el.shadowRoot?.querySelector('fieldset');
+      expect(fieldset?.classList.contains('cds--radio-button-group--invalid'))
+        .to.be.false;
+    });
+
+    it('should not show warning message or class when disabled and warn', async () => {
+      const el = await fixture(html`
+        <cds-radio-button-group disabled warn warn-text="Warning message">
+          <cds-radio-button value="test-1"></cds-radio-button>
+          <cds-radio-button value="test-2"></cds-radio-button>
+        </cds-radio-button-group>
+      `);
+
+      const warnMessage = el.shadowRoot?.querySelector(
+        '.cds--form-requirement'
+      );
+      expect(warnMessage).to.not.exist;
+
+      const fieldset = el.shadowRoot?.querySelector('fieldset');
+      expect(fieldset?.classList.contains('cds--radio-button-group--warning'))
+        .to.be.false;
+    });
+
+    it('should not show invalid message or class when readonly and invalid', async () => {
+      const el = await fixture(html`
+        <cds-radio-button-group
+          readonly
+          invalid
+          invalid-text="Invalid selection">
+          <cds-radio-button value="test-1"></cds-radio-button>
+          <cds-radio-button value="test-2"></cds-radio-button>
+        </cds-radio-button-group>
+      `);
+
+      const invalidMessage = el.shadowRoot?.querySelector(
+        '.cds--form-requirement'
+      );
+      expect(invalidMessage).to.not.exist;
+
+      const fieldset = el.shadowRoot?.querySelector('fieldset');
+      expect(fieldset?.classList.contains('cds--radio-button-group--invalid'))
+        .to.be.false;
+    });
+
+    it('should not show warning message or class when readonly and warn', async () => {
+      const el = await fixture(html`
+        <cds-radio-button-group readonly warn warn-text="Warning message">
+          <cds-radio-button value="test-1"></cds-radio-button>
+          <cds-radio-button value="test-2"></cds-radio-button>
+        </cds-radio-button-group>
+      `);
+
+      const warnMessage = el.shadowRoot?.querySelector(
+        '.cds--form-requirement'
+      );
+      expect(warnMessage).to.not.exist;
+
+      const fieldset = el.shadowRoot?.querySelector('fieldset');
+      expect(fieldset?.classList.contains('cds--radio-button-group--warning'))
+        .to.be.false;
+    });
+  });
 });

packages/web-components/src/components/radio-button/radio-button-group.ts

@@ -242,7 +242,7 @@ class CDSRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
       _handleSlotChange: handleSlotChange,
     } = this;
 
-    const showWarning = !readOnly && !invalid && warn;
+    const showWarning = !readOnly && !disabled && !invalid && warn;
     const showHelper = !invalid && !disabled && !warn;
 
     const invalidIcon = iconLoader(WarningFilled16, {
@@ -262,6 +262,9 @@ class CDSRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
       [`${prefix}--radio-button-group--readonly`]: readOnly,
       [`${prefix}--radio-button-group--${orientation}`]:
         orientation === 'vertical',
+      [`${prefix}--radio-button-group--invalid`]:
+        !readOnly && !disabled && invalid,
+      [`${prefix}--radio-button-group--warning`]: showWarning,
       [`${prefix}--radio-button-group--slug`]: hasAILabel,
     });
 
@@ -279,7 +282,7 @@ class CDSRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
         <slot></slot>
       </fieldset>
       <div class="${prefix}--radio-button__validation-msg">
-        ${!readOnly && invalid
+        ${!readOnly && !disabled && invalid
           ? html`
               ${invalidIcon}
               <div class="${prefix}--form-requirement">${invalidText}</div>

packages/web-components/src/components/radio-button/radio-button.scss

@@ -30,8 +30,8 @@ $css--plex: true !default;
   @extend .#{$prefix}--radio-button-group--vertical;
 }
 
-:host(#{$prefix}-radio-button-group[invalid]),
-:host(#{$prefix}-radio-button-group[warn]) {
+:host(#{$prefix}-radio-button-group[invalid]:not([disabled])),
+:host(#{$prefix}-radio-button-group[warn]:not([disabled])) {
   .#{$prefix}--radio-button__validation-msg {
     display: flex;
 
@@ -45,7 +45,8 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-radio-button-group[invalid]) .#{$prefix}--form-requirement {
+:host(#{$prefix}-radio-button-group[invalid]:not([disabled]))
+  .#{$prefix}--form-requirement {
   color: $text-error;
 }
 
@@ -68,7 +69,11 @@ $css--plex: true !default;
   margin-inline-end: 0;
 }
 
-:host(#{$prefix}-radio-button[invalid]:not([readOnly]))
+:host(
+    #{$prefix}-radio-button[invalid]:not([readOnly]):not([disabled]):not(
+        [disabledItem]
+      )
+  )
   .#{$prefix}--radio-button__appearance {
   border-color: $support-error !important; /* stylelint-disable-line declaration-no-important */
 }