Wrapped KRadioButton groups in KRadioButtonGroup

kolibri/core/assets/src/views/UserTable/index.vue

@@ -84,30 +84,31 @@
             :key="user.id"
             :style="isSelectedStyle(user.id)"
           >
-            <td>
-              <KCheckbox
-                v-if="selectable && enableMultipleSelection"
-                :disabled="disabled"
-                :checked="userIsSelected(user.id)"
-                class="user-checkbox"
-                data-test="userCheckbox"
-                @change="selectUser(user.id, $event)"
-              >
-                <KLabeledIcon
-                  :icon="isCoach ? 'coach' : 'person'"
-                  :label="user.full_name"
-                  data-test="fullName"
-                />
-                <UserTypeDisplay
-                  aria-hidden="true"
-                  :userType="user.kind"
-                  :omitLearner="true"
-                  class="role-badge"
-                  data-test="userRoleBadge"
-                  :class="$computedClass(userRoleBadgeStyle)"
-                />
-              </KCheckbox>
-              <!--
+            <KRadioButtonGroup>
+              <td>
+                <KCheckbox
+                  v-if="selectable && enableMultipleSelection"
+                  :disabled="disabled"
+                  :checked="userIsSelected(user.id)"
+                  class="user-checkbox"
+                  data-test="userCheckbox"
+                  @change="selectUser(user.id, $event)"
+                >
+                  <KLabeledIcon
+                    :icon="isCoach ? 'coach' : 'person'"
+                    :label="user.full_name"
+                    data-test="fullName"
+                  />
+                  <UserTypeDisplay
+                    aria-hidden="true"
+                    :userType="user.kind"
+                    :omitLearner="true"
+                    class="role-badge"
+                    data-test="userRoleBadge"
+                    :class="$computedClass(userRoleBadgeStyle)"
+                  />
+                </KCheckbox>
+                <!--
                 @MisRob: It's possible to pass `<label>` content to `KRadioButton`
                 via the default slot, however it's not what this slot has been
                 made for so doing so is hackish, even though resulting
@@ -117,52 +118,53 @@
                 not providing label content. Reported related KDS issue
                 https://github.com/learningequality/kolibri-design-system/issues/348
               -->
-              <KRadioButton
-                v-else-if="selectable && !enableMultipleSelection"
-                :disabled="disabled"
-                :buttonValue="user.id"
-                :currentValue="firstSelectedUser"
-                :label="''"
-                data-test="userRadioButton"
-                @change="selectSingleUser(user.id)"
-              >
-                <!--
+                <KRadioButton
+                  v-else-if="selectable && !enableMultipleSelection"
+                  :disabled="disabled"
+                  :buttonValue="user.id"
+                  :currentValue="firstSelectedUser"
+                  :label="''"
+                  data-test="userRadioButton"
+                  @change="selectSingleUser(user.id)"
+                >
+                  <!--
                   override muted color in the disabled state with
                   the normal text color in `style` (using `color`
                   prop won't work for this purpose)
                 -->
-                <KLabeledIcon
-                  :icon="isCoach ? 'coach' : 'person'"
-                  :label="user.full_name"
-                  data-test="fullName"
-                  :style="{ color: $themeTokens.text }"
-                />
-                <UserTypeDisplay
-                  aria-hidden="true"
-                  :userType="user.kind"
-                  :omitLearner="true"
-                  class="role-badge"
-                  data-test="userRoleBadge"
-                  :class="$computedClass(userRoleBadgeStyle)"
-                />
-              </KRadioButton>
-              <template v-else>
-                <KLabeledIcon
-                  :icon="isCoach ? 'coach' : 'person'"
-                  :label="user.full_name"
-                  :style="{ color: $themeTokens.text }"
-                  data-test="fullName"
-                />
-                <UserTypeDisplay
-                  aria-hidden="true"
-                  :userType="user.kind"
-                  :omitLearner="true"
-                  class="role-badge"
-                  data-test="userRoleBadge"
-                  :class="$computedClass(userRoleBadgeStyle)"
-                />
-              </template>
-            </td>
+                  <KLabeledIcon
+                    :icon="isCoach ? 'coach' : 'person'"
+                    :label="user.full_name"
+                    data-test="fullName"
+                    :style="{ color: $themeTokens.text }"
+                  />
+                  <UserTypeDisplay
+                    aria-hidden="true"
+                    :userType="user.kind"
+                    :omitLearner="true"
+                    class="role-badge"
+                    data-test="userRoleBadge"
+                    :class="$computedClass(userRoleBadgeStyle)"
+                  />
+                </KRadioButton>
+                <template v-else>
+                  <KLabeledIcon
+                    :icon="isCoach ? 'coach' : 'person'"
+                    :label="user.full_name"
+                    :style="{ color: $themeTokens.text }"
+                    data-test="fullName"
+                  />
+                  <UserTypeDisplay
+                    aria-hidden="true"
+                    :userType="user.kind"
+                    :omitLearner="true"
+                    class="role-badge"
+                    data-test="userRoleBadge"
+                    :class="$computedClass(userRoleBadgeStyle)"
+                  />
+                </template>
+              </td>
+            </KRadioButtonGroup>
             <td
               class="visuallyhidden"
               data-test="userRoleLabel"

kolibri/core/assets/src/views/sync/RadioButtonGroup.vue

@@ -1,23 +1,26 @@
 <template>
 
-  <div>
-    <KRadioButton
-      v-for="(item, idx) in items"
-      :key="idx"
-      :buttonValue="itemValue(item)"
-      :currentValue="currentValue"
-      :label="itemLabel(item)"
-      :description="description(item)"
-      v-bind="$attrs"
-      @input="$emit('update:currentValue', $event)"
-    >
-      <slot
-        v-if="showUnderButtonSlot(item)"
-        name="underbutton"
-        v-bind="{ selected }"
-      ></slot>
-    </KRadioButton>
-  </div>
+  <KRadioButtonGroup>
+    <div>
+      <KRadioButton
+        v-for="(item, idx) in items"
+        :key="idx"
+        :buttonValue="itemValue(item)"
+        :currentValue="currentValue"
+        :label="itemLabel(item)"
+        :description="description(item)"
+        v-bind="$attrs"
+        @input="$emit('update:currentValue', $event)"
+      >
+        <slot
+          v-if="showUnderButtonSlot(item)"
+          name="underbutton"
+          v-bind="{ selected }"
+        >
+        </slot>
+      </KRadioButton>
+    </div>
+  </KRadioButtonGroup>
 
 </template>
 

kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/SelectDeviceForm.vue

@@ -34,22 +34,24 @@
       <!-- Static Devices -->
       <template v-for="(d, idx) in savedDevices">
         <div :key="`div-${idx}`">
-          <KRadioButton
-            :key="idx"
-            v-model="selectedDeviceId"
-            class="radio-button"
-            :buttonValue="d.id"
-            :label="d.nickname"
-            :description="d.base_url"
-            :disabled="formDisabled || !isDeviceAvailable(d.id)"
-          />
-          <KButton
-            :key="`forget-${idx}`"
-            :text="coreString('removeAction')"
-            class="remove-device-button"
-            appearance="basic-link"
-            @click="removeSavedDevice(d.id)"
-          />
+          <KRadioButtonGroup>
+            <KRadioButton
+              :key="idx"
+              v-model="selectedDeviceId"
+              class="radio-button"
+              :buttonValue="d.id"
+              :label="d.nickname"
+              :description="d.base_url"
+              :disabled="formDisabled || !isDeviceAvailable(d.id)"
+            />
+            <KButton
+              :key="`forget-${idx}`"
+              :text="coreString('removeAction')"
+              class="remove-device-button"
+              appearance="basic-link"
+              @click="removeSavedDevice(d.id)"
+            />
+          </KRadioButtonGroup>
         </div>
       </template>
 

kolibri/core/assets/src/views/sync/SelectSyncSourceModal.vue

@@ -1,27 +1,29 @@
 <template>
 
-  <SelectSourceModal
-    :submitDisabled="formIsDisabled"
-    :showLoadingMessage="formIsDisabled && !initialDelay"
-    @submit="handleSubmit"
-    @cancel="handleCancel"
-  >
-    <KRadioButton
-      v-model="source"
-      :label="$tr('dataPortalLabel')"
-      :buttonValue="SyncSources.PORTAL"
-      :disabled="portalIsOffline || formIsDisabled"
-      :autofocus="!portalIsOffline"
-      :description="$tr('dataPortalDescription')"
-    />
-    <KRadioButton
-      v-model="source"
-      :label="$tr('localNetworkLabel')"
-      :buttonValue="SyncSources.PEER"
-      :disabled="formIsDisabled"
-      :description="$tr('localNetworkDescription')"
-    />
-  </SelectSourceModal>
+  <KRadioButtonGroup>
+    <SelectSourceModal
+      :submitDisabled="formIsDisabled"
+      :showLoadingMessage="formIsDisabled && !initialDelay"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    >
+      <KRadioButton
+        v-model="source"
+        :label="$tr('dataPortalLabel')"
+        :buttonValue="SyncSources.PORTAL"
+        :disabled="portalIsOffline || formIsDisabled"
+        :autofocus="!portalIsOffline"
+        :description="$tr('dataPortalDescription')"
+      />
+      <KRadioButton
+        v-model="source"
+        :label="$tr('localNetworkLabel')"
+        :buttonValue="SyncSources.PEER"
+        :disabled="formIsDisabled"
+        :description="$tr('localNetworkDescription')"
+      />
+    </SelectSourceModal>
+  </KRadioButtonGroup>
 
 </template>
 

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue

@@ -32,30 +32,34 @@
         {{ questionOrder$() }}
       </h5>
       <KGrid>
-        <KGridItem
-          :layout12="{ span: 6 }"
-          :layout8="{ span: 4 }"
-          :layout4="{ span: 2 }"
-        >
-          <KRadioButton
-            v-model="learners_see_fixed_order"
-            :label="randomizedLabel$()"
-            :buttonValue="false"
-            :description="randomizedOptionDescription$()"
-          />
-        </KGridItem>
-        <KGridItem
-          :layout12="{ span: 6 }"
-          :layout8="{ span: 4 }"
-          :layout4="{ span: 2 }"
-        >
-          <KRadioButton
-            v-model="learners_see_fixed_order"
-            :label="fixedLabel$()"
-            :buttonValue="true"
-            :description="fixedOptionDescription$()"
-          />
-        </KGridItem>
+        <KRadioButtonGroup>
+          <KGridItem
+            :layout12="{ span: 6 }"
+            :layout8="{ span: 4 }"
+            :layout4="{ span: 2 }"
+          >
+            <KRadioButton
+              v-model="learners_see_fixed_order"
+              :label="randomizedLabel$()"
+              :buttonValue="false"
+              :description="randomizedOptionDescription$()"
+            />
+          </KGridItem>
+        </KRadioButtonGroup>
+        <KRadioButtonGroup>
+          <KGridItem
+            :layout12="{ span: 6 }"
+            :layout8="{ span: 4 }"
+            :layout4="{ span: 2 }"
+          >
+            <KRadioButton
+              v-model="learners_see_fixed_order"
+              :label="fixedLabel$()"
+              :buttonValue="true"
+              :description="fixedOptionDescription$()"
+            />
+          </KGridItem>
+        </KRadioButtonGroup>
       </KGrid>
     </div>