Merge branch 'main' into next

kyndryl-design-system · Dec 17, 2024 · d2a97b1 · d2a97b1
2 parents f6cc6cf + fcd256a
commit d2a97b1
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 39 deletions.
diff --git a/src/components/reusable/checkbox/checkboxGroup.ts b/src/components/reusable/checkbox/checkboxGroup.ts
@@ -338,6 +338,10 @@ export class CheckboxGroup extends FormMixin(LitElement) {
       } else {
         this.value = [];
       }
+
+      this.checkboxes.forEach((checkbox: any) => {
+        checkbox.indeterminate = false;
+      });
     } else {
       const newValues = [...this.value];
       if (newValues.includes(value)) {

diff --git a/src/components/reusable/radioButton/radioButton.scss b/src/components/reusable/radioButton/radioButton.scss
@@ -68,11 +68,15 @@ input {
     }
 
     &:focus {
-      border-color: var(--kd-color-background-button-secondary-state-default) !important;
+      border-color: var(
+        --kd-color-background-button-secondary-state-default
+      ) !important;
       outline-color: var(--kd-color-background-ui-default-focus);
 
       &::before {
-        background: var(--kd-color-background-button-secondary-state-default) !important;
+        background: var(
+          --kd-color-background-button-secondary-state-default
+        ) !important;
       }
     }
 
@@ -122,6 +126,8 @@ input {
   &[disabled] {
     border-color: var(--kd-color-border-ui-disabled);
     outline-color: transparent;
+    opacity: 0.5;
+    cursor: not-allowed;
 
     &:hover {
       background: transparent;

diff --git a/src/components/reusable/radioButton/radioButtonGroup.ts b/src/components/reusable/radioButton/radioButtonGroup.ts
@@ -96,61 +96,44 @@ export class RadioButtonGroup extends FormMixin(LitElement) {
           : null}
 
         <div class="${this.horizontal ? 'horizontal' : ''}">
-          <slot></slot>
+          <slot @slotchange=${this._handleSlotChange}></slot>
         </div>
       </fieldset>
     `;
   }
 
+  private _handleSlotChange() {
+    this._updateChildren();
+  }
+
+  private _updateChildren() {
+    this.radioButtons.forEach((radio) => {
+      radio.disabled = this.disabled;
+      radio.checked = radio.value === this.value;
+      radio.name = this.name;
+      radio.required = this.required;
+      radio.invalid = this._isInvalid;
+    });
+  }
+
   override willUpdate(changedProps: any) {
     if (changedProps.has('textStrings')) {
       this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);
     }
   }
 
   override updated(changedProps: any) {
-    // preserve FormMixin updated function
     this._onUpdated(changedProps);
 
-    if (changedProps.has('name')) {
-      // set name for each radio button
-      this.radioButtons.forEach((radio: any) => {
-        radio.name = this.name;
-      });
-    }
-
-    if (changedProps.has('value')) {
-      // set checked state for each radio button
-      this.radioButtons.forEach((radio: any) => {
-        radio.checked = radio.value === this.value;
-      });
-    }
-
-    if (changedProps.has('required')) {
-      // set required for each radio button
-      this.radioButtons.forEach((radio: any) => {
-        radio.required = this.required;
-      });
-    }
-
-    if (
-      changedProps.has('disabled') &&
-      changedProps.get('disabled') !== undefined
-    ) {
-      // set disabled for each radio button
-      this.radioButtons.forEach((radio: any) => {
-        radio.disabled = this.disabled;
-      });
-    }
-
     if (
+      changedProps.has('value') ||
+      changedProps.has('name') ||
+      changedProps.has('required') ||
+      changedProps.has('disabled') ||
       changedProps.has('invalidText') ||
       changedProps.has('internalValidationMsg')
     ) {
-      // set invalid state for each radio button
-      this.radioButtons.forEach((radio: any) => {
-        radio.invalid = this._isInvalid;
-      });
+      this._updateChildren();
     }
   }