Migrate KEmptyPlaceholder to use KOptionalText

kolibri/core/assets/src/views/ElapsedTime.vue

@@ -1,9 +1,8 @@
 <template>
 
-  <span v-if="date">
-    {{ $formatRelative(ceilingDate, { now: now }) }}
-  </span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="date ? $formatRelative(ceilingDate, { now: now }) : ''"
+  />
 
 </template>
 

kolibri/core/assets/src/views/TimeDuration.vue

@@ -1,7 +1,8 @@
 <template>
 
-  <span v-if="seconds">{{ formattedTime }}</span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="seconds ? formattedTime : ''"
+  />
 
 </template>
 

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

@@ -165,10 +165,9 @@
             </td>
             <template v-if="showDemographicInfo">
               <td class="id-col">
-                <span v-if="user.id_number">
-                  {{ user.id_number }}
-                </span>
-                <KEmptyPlaceholder v-else />
+                <KOptionalText
+                  :text="user.id_number ? user.id_number : ''"
+                />
               </td>
               <td>
                 <GenderDisplayText :gender="user.gender" />

kolibri/core/assets/src/views/userAccounts/BirthYearDisplayText.vue

@@ -1,9 +1,9 @@
 <template>
 
-  <span v-if="isSpecified && birthYear">
-    {{ $formatDate(birthYear, { year: 'numeric' }) }}
-  </span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="
+      (isSpecified && birthYear) ? $formatDate(birthYear, { year: 'numeric' }) : ''"
+  />
 
 </template>
 

kolibri/core/assets/src/views/userAccounts/GenderDisplayText.vue

@@ -1,9 +1,9 @@
 <template>
 
-  <span v-if="isSpecified && displayText">
-    {{ displayText }}
-  </span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="
+      (isSpecified && displayText) ? displayText : ''"
+  />
 
 </template>
 

kolibri/core/package.json

@@ -20,7 +20,7 @@
     "intl": "^1.2.4",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.1.42",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8",
+    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system#add-koptionaltext",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",

kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue

@@ -49,10 +49,11 @@
           {{ coachString('descriptionLabel') }}
         </KGridItem>
         <KGridItem :layout12="layout12Value">
-          <template v-if="lesson.description">
-            {{ lesson.description }}
-          </template>
-          <KEmptyPlaceholder v-else />
+          <KOptionalText>
+            <template v-if="lesson.description">
+              {{ lesson.description }}
+            </template>
+          </KOptionalText>
         </KGridItem>
       </div>
     </KGrid>

kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLearnersTable.spec.js.snap

@@ -31,11 +31,13 @@ exports[`ReportsLearnersTable doesn't render groups information when show groups
         </td>
         <!---->
         <!---->
-        <td><span>92 seconds</span></td>
+        <td><span>
+    92 seconds
+  </span></td>
         <!---->
         <td><span>
-  yesterday
-</span></td>
+    yesterday
+  </span></td>
       </tr>
       <tr>
         <td><span class="labeled-icon-wrapper"><span class="icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="" style="fill: #212121; top: 2px;"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg></span> <span class="label" style="margin-left: 1.975em; max-width: calc(100% - 1.975em);"><span dir="auto" class="debug-warning"><a dir="auto" class="KRouterLink-noKey-0_1jjc9c8 link"><!----> <span class="link-text">learner2</span>
@@ -49,11 +51,13 @@ exports[`ReportsLearnersTable doesn't render groups information when show groups
         </td>
         <!---->
         <!---->
-        <td><span>17 seconds</span></td>
+        <td><span>
+    17 seconds
+  </span></td>
         <!---->
         <td><span>
-  3 hours ago
-</span></td>
+    3 hours ago
+  </span></td>
       </tr>
     </transition-group-stub>
   </table>

kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap

@@ -18,7 +18,9 @@ exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some gr
     <th>
       Average time spent
     </th>
-    <td><span>2 minutes</span></td>
+    <td><span>
+    2 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -62,7 +64,9 @@ exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some gr
     <th>
       Average time spent
     </th>
-    <td><span>2 minutes</span></td>
+    <td><span>
+    2 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -92,7 +96,9 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di
     <th>
       Average time spent
     </th>
-    <td><span>3 minutes</span></td>
+    <td><span>
+    3 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -157,7 +163,9 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di
     <th>
       Average time spent
     </th>
-    <td><span>3 minutes</span></td>
+    <td><span>
+    3 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -170,7 +178,9 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di
     <th>
       Average time spent
     </th>
-    <td><span>2 minutes</span></td>
+    <td><span>
+    2 minutes
+  </span></td>
   </tr>
 </table>
 `;

kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue

@@ -24,7 +24,6 @@
         />
       </div>
     </form>
-
     <transition mode="out-in">
       <p
         v-if="!searchHasBeenMade"

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

@@ -62,10 +62,9 @@
               </td>
               <td>
                 <span :ref="`coachNames${classroom.id}`">
-                  <template v-if="coachNames(classroom).length">
-                    {{ formattedCoachNames(classroom) }}
-                  </template>
-                  <KEmptyPlaceholder v-else />
+                  <KOptionalText
+                    :text="coachNames(classroom).length ? formattedCoachNames(classroom) : ''"
+                  />
                 </span>
                 <KTooltip
                   v-if="formattedCoachNamesTooltip(classroom)"

yarn.lock

@@ -7390,6 +7390,21 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.1.42.tgz#2f62a8d8b8894e5cfbd47ee6564b31018818c93f"
   integrity sha512-2hUxYnzUEfhLFJO9egVSwYW8/PKob9wLeDYfB74mtIzgQ4zy6huRj3574WetK9gREi+W1Jcm7HGPsfZIFzFvrA==
 
+"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system#d0ec826d6dfee3be9805fd48ecb2d707df7999cf":
+  version "1.3.0"
+  resolved "https://github.com/AlexVelezLl/kolibri-design-system#d0ec826d6dfee3be9805fd48ecb2d707df7999cf"
+  dependencies:
+    aphrodite "https://github.com/learningequality/aphrodite/"
+    autosize "^3.0.21"
+    css-element-queries "^1.2.0"
+    frame-throttle "^3.0.0"
+    fuzzysearch "^1.0.3"
+    keen-ui "^1.3.0"
+    lodash "^4.17.15"
+    popper.js "^1.14.6"
+    purecss "^0.6.2"
+    tippy.js "^4.2.1"
+
 "kolibri-design-system@https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8":
   version "1.3.0"
   resolved "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8"