MOBILE-3749 core: Add new spacer component

src/addons/calendar/components/filter/addon-calendar-filter-popover.html

@@ -4,9 +4,7 @@
         <ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
         <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end"></ion-toggle>
     </ion-item>
-    <ion-item-divider *ngIf="filter.course || filter.category || filter.group">
+    <core-spacer *ngIf="filter.course || filter.category || filter.group"></core-spacer>
-        <ion-label></ion-label>
-    </ion-item-divider>
     <ng-container *ngIf="filter.course || filter.category || filter.group">
         <ion-radio-group [(ngModel)]="courseId" (ionChange)="onChange()">
             <ion-item class="ion-text-wrap" *ngFor="let course of courses">

src/addons/mod/feedback/pages/attempt/attempt.html

@@ -33,9 +33,7 @@
             </ion-item >
             <ng-container *ngIf="items && items.length">
                 <ng-container *ngFor="let item of items">
-                    <ion-item-divider *ngIf="item.typ == 'pagebreak'">
+                    <core-spacer *ngIf="item.typ == 'pagebreak'"></core-spacer>
-                        <ion-label></ion-label>
-                    </ion-item-divider>
                     <ion-item class="ion-text-wrap" *ngIf="item.typ != 'pagebreak'" [color]="item.dependitem > 0 ? 'light' : ''">
                         <ion-label>
                             <h2 *ngIf="item.name" [core-mark-required]="item.required">

src/addons/mod/feedback/pages/form/form.html

@@ -21,9 +21,7 @@
                     </ion-label>
                 </ion-item>
                 <ng-container *ngFor="let item of items">
-                    <ion-item-divider *ngIf="item.typ == 'pagebreak'">
+                    <core-spacer *ngIf="item.typ == 'pagebreak'"></core-spacer>
-                        <ion-label></ion-label>
-                    </ion-item-divider>
                     <ng-container *ngIf="item.typ != 'pagebreak'">
                         <ion-item class="ion-text-wrap addon-mod_feedback-item" [color]="item.dependitem > 0 ? 'light' : ''"
                             [class.core-danger-item]="item.isEmpty || item.hasError">

src/addons/mod/forum/pages/discussion/discussion.html

@@ -101,7 +101,7 @@
 
         <ion-card *ngIf="sort != 'nested'">
             <ng-container *ngFor="let post of posts; first as first">
-                <ion-item-divider *ngIf="!first"><ion-label></ion-label></ion-item-divider>
+                <core-spacer *ngIf="!first"></core-spacer>
                 <addon-mod-forum-post
                     [post]="post" [courseId]="courseId" [discussionId]="discussionId"
                     [component]="component" [componentId]="cmId" [replyData]="replyData"

src/addons/mod/quiz/components/preflight-modal/preflight-modal.html

@@ -18,7 +18,7 @@
                     <core-dynamic-component [component]="data.component" [data]="data.data">
                         <p class="ion-padding">Couldn't find the directive to render this access rule.</p>
                     </core-dynamic-component>
-                    <ion-item-divider *ngIf="!last"><ion-label></ion-label></ion-item-divider>
+                    <core-spacer *ngIf="!last"></core-spacer>
                 </ng-container>
 
                 <ion-button expand="block" type="submit" class="ion-margin">

src/core/components/components.module.ts

@@ -56,6 +56,7 @@ import { CoreTabsOutletComponent } from './tabs-outlet/tabs-outlet';
 import { CoreTimerComponent } from './timer/timer';
 import { CoreUserAvatarComponent } from './user-avatar/user-avatar';
 import { CoreComboboxComponent } from './combobox/combobox';
+import { CoreSpacerComponent } from './spacer/spacer';
 
 @NgModule({
     declarations: [
@@ -94,6 +95,7 @@ import { CoreComboboxComponent } from './combobox/combobox';
         CoreTimerComponent,
         CoreUserAvatarComponent,
         CoreComboboxComponent,
+        CoreSpacerComponent,
     ],
     imports: [
         CommonModule,
@@ -139,6 +141,7 @@ import { CoreComboboxComponent } from './combobox/combobox';
         CoreTimerComponent,
         CoreUserAvatarComponent,
         CoreComboboxComponent,
+        CoreSpacerComponent,
     ],
 })
 export class CoreComponentsModule {}

src/core/components/spacer/spacer.ts

@@ -0,0 +1,30 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component } from '@angular/core';
+
+/**
+ * Component to display an empty spacer using item divider.
+ *
+ * Example usage:
+ * <core-spacer></core-spacer>
+ */
+@Component({
+    selector: 'core-spacer',
+    template: '<ion-item-divider><ion-label></ion-label></ion-item-divider>',
+    styles: [':host {--item-divider-min-height: 30px;}'],
+})
+export class CoreSpacerComponent {
+
+}

src/core/features/course/components/module/module.ts

@@ -44,14 +44,14 @@ import {
 })
 export class CoreCourseModuleComponent implements OnInit, OnDestroy {
 
-    @Input() module?: CoreCourseModule; // The module to render.
+    @Input() module!: CoreCourseModule; // The module to render.
     @Input() courseId?: number; // The course the module belongs to.
     @Input() section?: CoreCourseSection; // The section the module belongs to.
     // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('downloadEnabled') set enabled(value: boolean) {
         this.downloadEnabled = value;
 
-        if (!this.module?.handlerData?.showDownloadButton || !this.downloadEnabled || this.statusCalculated) {
+        if (!this.module.handlerData?.showDownloadButton || !this.downloadEnabled || this.statusCalculated) {
             return;
         }
 
@@ -81,10 +81,6 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
      * Component being initialized.
      */
     ngOnInit(): void {
-        if (!this.module) {
-            return;
-        }
-
         this.courseId = this.courseId || this.module.course;
         this.modNameTranslated = CoreCourse.translateModuleName(this.module.modname) || '';
 
@@ -125,7 +121,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
      * @param event Click event.
      */
     moduleClicked(event: Event): void {
-        if (this.module?.uservisible !== false && this.module?.handlerData?.action) {
+        if (this.module.uservisible !== false && this.module.handlerData?.action) {
             this.module.handlerData.action(event, this.module, this.courseId!);
         }
     }
@@ -195,7 +191,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
         this.spinner = false;
         this.downloadStatus = status;
 
-        this.module?.handlerData?.updateStatus?.(status);
+        this.module.handlerData?.updateStatus?.(status);
     }
 
     /**
@@ -218,7 +214,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
      */
     ngOnDestroy(): void {
         // this.statusObserver?.off();
-        this.module?.handlerData?.onDestroy?.();
+        this.module.handlerData?.onDestroy?.();
         this.isDestroyed = true;
     }
 

src/core/features/course/pages/preview/preview.html

@@ -58,7 +58,7 @@
                         <h2>{{contact.fullname}}</h2>
                     </ion-label>
                 </ion-item>
-                <ion-item-divider><ion-label></ion-label></ion-item-divider>
+                <core-spacer></core-spacer>
             </ng-container>
 
             <ion-item class="ion-text-wrap" *ngIf="course.customfields">

src/core/features/mainmenu/pages/more/more.html

@@ -20,7 +20,7 @@
                 <p>{{ siteUrl }}</p>
             </ion-label>
         </ion-item>
-        <ion-item-divider><ion-label></ion-label></ion-item-divider>
+        <core-spacer></core-spacer>
         <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
             <ion-label><ion-spinner></ion-spinner></ion-label>
         </ion-item>
@@ -82,7 +82,7 @@
                 <h2>{{ logoutLabel | translate }}</h2>
             </ion-label>
         </ion-item>
-        <ion-item-divider><ion-label></ion-label></ion-item-divider>
+        <core-spacer></core-spacer>
         <ion-item button (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate" detail="true">
             <ion-icon name="fas-cogs" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>

src/core/features/settings/pages/site/site.html

@@ -25,7 +25,7 @@
                         <p>{{ siteUrl }}</p>
                     </ion-label>
                 </ion-item>
-                <ion-item-divider><ion-label></ion-label></ion-item-divider>
+                <core-spacer></core-spacer>
 
                 <ion-item *ngFor="let handler of handlers.items" [ngClass]="['core-settings-handler', handler.class]"
                     [attr.aria-label]="handler.title | translate" detail="true" (click)="handlers.select(handler)" button

src/core/features/sitehome/pages/index/index.html

@@ -31,9 +31,7 @@
 
                     <!-- Site home items: news, categories, courses, etc. -->
                     <ng-container *ngIf="items.length > 0">
-                        <ion-item-divider *ngIf="section && section!.hasContent">
+                        <core-spacer *ngIf="section && section!.hasContent"></core-spacer>
-                            <ion-label></ion-label>
-                        </ion-item-divider>
                         <ng-container *ngFor="let item of items">
                             <ng-container [ngSwitch]="item">
                                 <ng-container *ngSwitchCase="'LIST_OF_COURSE'">

src/theme/theme.base.scss

@@ -193,11 +193,6 @@ ion-item-divider {
         opacity: var(--ion-item-detail-icon-opacity);
         padding-inline-end: 16px;
     }
-
-    &.ios {
-        padding-top: 10px;
-        padding-bottom: 10px;
-    }
 }
 
 // Ionic list.

src/theme/theme.light.scss

@@ -171,10 +171,11 @@
         --detail-icon-opacity: var(--ion-item-detail-icon-opacity);
     }
 
+    --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
     ion-item-divider {
         --background: var(--gray-lighter);
         --color: inherit;
-        min-height: calc(var(--a11y-min-target-size) + 8px);
+        min-height: var(--item-divider-min-height);
     }
 
     --core-combobox-background: var(--ion-item-background);