Merge pull request #12751 from iamshobhraj/v1

Wrapped KRadioButton groups in KRadioButtonGroup
learningequality · Dec 4, 2024 · 73eaa93 · 73eaa93
2 parents 4f90b4e + e24dbae
commit 73eaa93
Show file tree

Hide file tree

Showing 25 changed files with 704 additions and 521 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentCopyModal.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentCopyModal.vue
@@ -12,14 +12,16 @@
       v-if="stage === Stages.SELECT_CLASSROOM"
       id="select-classroom"
     >
-      <KRadioButton
-        v-for="classroom in availableClassrooms"
-        :key="classroom.id"
-        v-model="selectedClassroomId"
-        :label="classroomLabel(classroom)"
-        :buttonValue="classroom.id"
-        data-test="radio-button"
-      />
+      <KRadioButtonGroup>
+        <KRadioButton
+          v-for="classroom in availableClassrooms"
+          :key="classroom.id"
+          v-model="selectedClassroomId"
+          :label="classroomLabel(classroom)"
+          :buttonValue="classroom.id"
+          data-test="radio-button"
+        />
+      </KRadioButtonGroup>
     </div>
     <!-- Learner Group Selection Form -->
     <div

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/RecipientSelector.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/RecipientSelector.vue
@@ -2,18 +2,19 @@
 
   <div>
     <!-- Entire class -->
-    <KRadioButton
-      :buttonValue="true"
-      :currentValue="entireClassIsSelected"
-      :disabled="disabled"
-      @change="selectEntireClass()"
-    >
-      <KLabeledIcon
-        :label="coachString('entireClassLabel')"
-        icon="classes"
-      />
-    </KRadioButton>
-
+    <KRadioButtonGroup>
+      <KRadioButton
+        :buttonValue="true"
+        :currentValue="entireClassIsSelected"
+        :disabled="disabled"
+        @change="selectEntireClass()"
+      >
+        <KLabeledIcon
+          :label="coachString('entireClassLabel')"
+          icon="classes"
+        />
+      </KRadioButton>
+    </KRadioButtonGroup>
     <!-- Learner groups -->
     <KCheckbox
       v-for="group in groups"

diff --git a/...ri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue b/...ri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
@@ -9,53 +9,56 @@
         :indeterminate="selectAllIndeterminate"
         @change="$emit('changeselectall', $event)"
       />
-      <li
-        v-for="content in contentList"
-        :key="content.id"
-        class="content-list-item"
-        :aria-selected="contentIsChecked(content)"
-      >
-        <KCheckbox
-          v-if="contentHasCheckbox(content) && !showRadioButtons"
-          class="content-checkbox"
-          :label="content.title"
-          :showLabel="false"
-          :checked="contentIsChecked(content)"
-          :indeterminate="contentIsIndeterminate(content)"
-          :disabled="contentCheckboxDisabled(content)"
-          @change="handleCheckboxChange(content, $event)"
-        />
-        <KRadioButton
-          v-else-if="contentHasCheckbox(content) && showRadioButtons"
-          class="content-checkbox"
-          :label="content.title"
-          :showLabel="false"
-          :currentValue="contentIsChecked(content) ? content.id : 'none'"
-          :buttonValue="content.id"
-          :disabled="contentCheckboxDisabled(content)"
-          @change="handleCheckboxChange(content, true)"
-        />
-        <!--
+      <KRadioButtonGroup>
+        <li
+          v-for="content in contentList"
+          :key="content.id"
+          class="content-list-item"
+          :aria-selected="contentIsChecked(content)"
+        >
+          <KCheckbox
+            v-if="contentHasCheckbox(content) && !showRadioButtons"
+            class="content-checkbox"
+            :label="content.title"
+            :showLabel="false"
+            :checked="contentIsChecked(content)"
+            :indeterminate="contentIsIndeterminate(content)"
+            :disabled="contentCheckboxDisabled(content)"
+            @change="handleCheckboxChange(content, $event)"
+          />
+          <KRadioButton
+            v-else-if="contentHasCheckbox(content) && showRadioButtons"
+            class="content-checkbox"
+            :label="content.title"
+            :showLabel="false"
+            :currentValue="contentIsChecked(content) ? content.id : 'none'"
+            :buttonValue="content.id"
+            :disabled="contentCheckboxDisabled(content)"
+            @change="handleCheckboxChange(content, true)"
+          />
+          <!--
           disabled, tabindex, is-leaf class set here to hack making the card not clickable
           if you're trying to make the card clickable remove these properties
         -->
-        <LessonContentCard
-          class="content-card"
-          :disabled="content.is_leaf"
-          :tabindex="content.is_leaf ? -1 : 0"
-          :class="{ 'with-checkbox': needCheckboxes }"
-          :content="content"
-          :message="contentCardMessage(content)"
-          :link="contentCardLink(content)"
-        >
-          <template #notice>
-            <slot
-              name="notice"
-              :content="content"
-            ></slot>
-          </template>
-        </LessonContentCard>
-      </li>
+          <LessonContentCard
+            class="content-card"
+            :disabled="content.is_leaf"
+            :tabindex="content.is_leaf ? -1 : 0"
+            :class="{ 'with-checkbox': needCheckboxes }"
+            :content="content"
+            :message="contentCardMessage(content)"
+            :link="contentCardLink(content)"
+          >
+            <template #notice>
+              <slot
+                name="notice"
+                :content="content"
+              >
+              </slot>
+            </template>
+          </LessonContentCard>
+        </li>
+      </KRadioButtonGroup>
     </ul>
 
     <template>

diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue
@@ -32,30 +32,32 @@
         {{ 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>
+          <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>
 

diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
@@ -30,39 +30,41 @@
           {{ sectionOrderLabel$() }}
         </h5>
         <KGrid>
-          <KGridItem
-            :layout12="{ span: 6 }"
-            :layout8="{ span: 4 }"
-            :layout4="{ span: 2 }"
-          >
-            <KRadioButton
-              :currentValue="quiz.learners_see_fixed_order"
-              :label="randomizedLabel$()"
-              :buttonValue="false"
-              :description="randomizedSectionOptionDescription$()"
-              @input="value => updateQuiz({ learners_see_fixed_order: value })"
-            />
-          </KGridItem>
-          <KGridItem
-            :layout12="{ span: 6 }"
-            :layout8="{ span: 4 }"
-            :layout4="{ span: 2 }"
-          >
-            <KRadioButton
-              :currentValue="quiz.learners_see_fixed_order"
-              :label="fixedLabel$()"
-              :buttonValue="true"
-              :description="fixedSectionOptionDescription$()"
-              @input="value => updateQuiz({ learners_see_fixed_order: value })"
-            />
-            <KButton
-              v-if="quiz.learners_see_fixed_order"
-              :text="coreString('editAction') + ' - ' + sectionOrderLabel$()"
-              class="edit-section-order-btn"
-              appearance="basic-link"
-              @click="editSectionOrder"
-            />
-          </KGridItem>
+          <KRadioButtonGroup>
+            <KGridItem
+              :layout12="{ span: 6 }"
+              :layout8="{ span: 4 }"
+              :layout4="{ span: 2 }"
+            >
+              <KRadioButton
+                :currentValue="quiz.learners_see_fixed_order"
+                :label="randomizedLabel$()"
+                :buttonValue="false"
+                :description="randomizedSectionOptionDescription$()"
+                @input="value => updateQuiz({ learners_see_fixed_order: value })"
+              />
+            </KGridItem>
+            <KGridItem
+              :layout12="{ span: 6 }"
+              :layout8="{ span: 4 }"
+              :layout4="{ span: 2 }"
+            >
+              <KRadioButton
+                :currentValue="quiz.learners_see_fixed_order"
+                :label="fixedLabel$()"
+                :buttonValue="true"
+                :description="fixedSectionOptionDescription$()"
+                @input="value => updateQuiz({ learners_see_fixed_order: value })"
+              />
+              <KButton
+                v-if="quiz.learners_see_fixed_order"
+                :text="coreString('editAction') + ' - ' + sectionOrderLabel$()"
+                class="edit-section-order-btn"
+                appearance="basic-link"
+                @click="editSectionOrder"
+              />
+            </KGridItem>
+          </KRadioButtonGroup>
         </KGrid>
       </div>
 

diff --git a/...plugins/device/assets/src/views/ManageContentPage/SelectTransferSourceModal/DriveList.vue b/...plugins/device/assets/src/views/ManageContentPage/SelectTransferSourceModal/DriveList.vue
@@ -11,15 +11,19 @@
     </div>
 
     <div v-else>
-      <h2>{{ $tr('drivesFound') }}</h2>
-      <KRadioButton
-        v-for="drive in drives"
-        :key="drive.id"
-        :label="enabledDriveLabel(drive)"
-        :buttonValue="drive.id"
-        :currentValue="value"
-        @change="$emit('input', drive.id)"
-      />
+      <h2>
+        {{ $tr('drivesFound') }}
+      </h2>
+      <KRadioButtonGroup>
+        <KRadioButton
+          v-for="drive in drives"
+          :key="drive.id"
+          :label="enabledDriveLabel(drive)"
+          :buttonValue="drive.id"
+          :currentValue="value"
+          @change="$emit('input', drive.id)"
+        />
+      </KRadioButtonGroup>
     </div>
   </div>
 

diff --git a/.../assets/src/views/ManageContentPage/SelectTransferSourceModal/SelectImportSourceModal.vue b/.../assets/src/views/ManageContentPage/SelectTransferSourceModal/SelectImportSourceModal.vue
@@ -6,28 +6,30 @@
     @submit="handleSubmit"
     @cancel="handleCancel"
   >
-    <KRadioButton
-      v-model="source"
-      :label="$tr('network')"
-      :buttonValue="ContentSources.KOLIBRI_STUDIO"
-      :disabled="kolibriStudioIsOffline || formIsDisabled"
-      :autofocus="!kolibriStudioIsOffline"
-      :description="$tr('studioDescription')"
-    />
-    <KRadioButton
-      v-model="source"
-      :label="$tr('localNetworkOrInternet')"
-      :buttonValue="ContentSources.PEER_KOLIBRI_SERVER"
-      :disabled="formIsDisabled"
-      :description="$tr('networkDescription')"
-    />
-    <KRadioButton
-      v-model="source"
-      :label="$tr('localDrives')"
-      :buttonValue="ContentSources.LOCAL_DRIVE"
-      :disabled="formIsDisabled"
-      :description="$tr('localDescription')"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        v-model="source"
+        :label="$tr('network')"
+        :buttonValue="ContentSources.KOLIBRI_STUDIO"
+        :disabled="kolibriStudioIsOffline || formIsDisabled"
+        :autofocus="!kolibriStudioIsOffline"
+        :description="$tr('studioDescription')"
+      />
+      <KRadioButton
+        v-model="source"
+        :label="$tr('localNetworkOrInternet')"
+        :buttonValue="ContentSources.PEER_KOLIBRI_SERVER"
+        :disabled="formIsDisabled"
+        :description="$tr('networkDescription')"
+      />
+      <KRadioButton
+        v-model="source"
+        :label="$tr('localDrives')"
+        :buttonValue="ContentSources.LOCAL_DRIVE"
+        :disabled="formIsDisabled"
+        :description="$tr('localDescription')"
+      />
+    </KRadioButtonGroup>
   </SelectSourceModal>
 
 </template>