Merge branch 'feature-8.5' into ROU-11112-toggle

core/api.txt

@@ -2002,3 +2002,6 @@ ion-toolbar,css-prop,--padding-start,ios
 ion-toolbar,css-prop,--padding-start,md
 ion-toolbar,css-prop,--padding-top,ios
 ion-toolbar,css-prop,--padding-top,md
+ion-toolbar,part,background
+ion-toolbar,part,container
+ion-toolbar,part,content

core/src/components/toolbar/toolbar.tsx

@@ -13,6 +13,10 @@ import type { Color, CssClassMap, StyleEventDetail } from '../../interface';
  * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
  * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
+ *
+ * @part background - The background of the toolbar, covering the entire area behind the toolbar content.
+ * @part container - The container that wraps all toolbar content, including the default slot and named slot content.
+ * @part content - The container for the default slot, wrapping content provided without a named slot.
  */
 @Component({
   tag: 'ion-toolbar',
@@ -97,11 +101,11 @@ export class Toolbar implements ComponentInterface {
           }),
         }}
       >
-        <div class="toolbar-background"></div>
-        <div class="toolbar-container">
+        <div class="toolbar-background" part="background"></div>
+        <div class="toolbar-container" part="container">
           <slot name="start"></slot>
           <slot name="secondary"></slot>
-          <div class="toolbar-content">
+          <div class="toolbar-content" part="content">
             <slot></slot>
           </div>
           <slot name="primary"></slot>

core/src/utils/config.ts

@@ -2,6 +2,7 @@ import type { SpinnerTypes } from '../components/spinner/spinner-configs';
 import type { TabButtonLayout } from '../components/tab-bar/tab-bar-interface';
 import type { AnimationBuilder, Mode } from '../interface';
 
+import type { LogLevel } from './logging';
 import type { PlatformConfig } from './platform';
 
 export interface IonicConfig {
@@ -220,6 +221,15 @@ export interface IonicConfig {
    */
   experimentalCloseWatcher?: boolean;
 
+  /**
+   * Configures the logging level for Ionic Framework:
+   *
+   * - `'OFF'`: No errors or warnings are logged.
+   * - `'ERROR'`: Logs only errors.
+   * - `'WARN'`: Logs errors and warnings.
+   */
+  logLevel?: LogLevel;
+
   // PRIVATE configs
   keyboardHeight?: number;
   inputShims?: boolean;

core/src/utils/logging/index.ts

@@ -1,3 +1,11 @@
+import { config } from '@global/config';
+
+export const enum LogLevel {
+  OFF = 'OFF',
+  ERROR = 'ERROR',
+  WARN = 'WARN',
+}
+
 /**
  * Logs a warning to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
@@ -5,18 +13,24 @@
  * @param message - The string message to be logged to the console.
  */
 export const printIonWarning = (message: string, ...params: any[]) => {
+  const logLevel = config.get('logLevel', LogLevel.WARN);
+  if ([LogLevel.WARN].includes(logLevel)) {
     return console.warn(`[Ionic Warning]: ${message}`, ...params);
+  }
 };
 
-/*
+/**
  * Logs an error to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
  *
  * @param message - The string message to be logged to the console.
  * @param params - Additional arguments to supply to the console.error.
  */
-export const printIonError = (message: string, ...params: any) => {
+export const printIonError = (message: string, ...params: any[]) => {
+  const logLevel = config.get('logLevel', LogLevel.ERROR);
+  if ([LogLevel.ERROR, LogLevel.WARN].includes(logLevel)) {
     return console.error(`[Ionic Error]: ${message}`, ...params);
+  }
 };
 
 /**

core/src/utils/logging/test/logging.spec.ts

@@ -0,0 +1,114 @@
+import { config } from '@global/config';
+import { LogLevel } from '../index';
+
+import { printIonError, printIonWarning } from '../index';
+
+describe('Logging', () => {
+  describe('#printIonWarning', () => {
+    let consoleWarnSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      consoleWarnSpy = jest.spyOn(console, 'warn');
+      // Suppress console.warn output from polluting the test output
+      consoleWarnSpy.mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      consoleWarnSpy.mockRestore();
+    });
+
+    describe('when the logLevel configuration is not set', () => {
+      it('logs a warning to the console', () => {
+        config.set('logLevel', undefined);
+
+        printIonWarning('This is a warning message');
+
+        expect(consoleWarnSpy).toHaveBeenCalledWith('[Ionic Warning]: This is a warning message');
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'WARN'", () => {
+      it('logs a warning to the console', () => {
+        config.set('logLevel', LogLevel.WARN);
+
+        printIonWarning('This is a warning message');
+
+        expect(consoleWarnSpy).toHaveBeenCalledWith('[Ionic Warning]: This is a warning message');
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'ERROR'", () => {
+      it('does not log a warning to the console', () => {
+        config.set('logLevel', LogLevel.ERROR);
+
+        printIonWarning('This is a warning message');
+
+        expect(consoleWarnSpy).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'OFF'", () => {
+      it('does not log a warning to the console', () => {
+        config.set('logLevel', LogLevel.OFF);
+
+        printIonWarning('This is a warning message');
+
+        expect(consoleWarnSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('#printIonError', () => {
+    let consoleErrorSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      consoleErrorSpy = jest.spyOn(console, 'error');
+      // Suppress console.error output from polluting the test output
+      consoleErrorSpy.mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      consoleErrorSpy.mockRestore();
+    });
+
+    describe('when the logLevel configuration is not set', () => {
+      it('logs an error to the console', () => {
+        config.set('logLevel', undefined);
+
+        printIonError('This is an error message');
+
+        expect(consoleErrorSpy).toHaveBeenCalledWith('[Ionic Error]: This is an error message');
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'ERROR'", () => {
+      it('logs an error to the console', () => {
+        config.set('logLevel', LogLevel.ERROR);
+
+        printIonError('This is an error message');
+
+        expect(consoleErrorSpy).toHaveBeenCalledWith('[Ionic Error]: This is an error message');
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'WARN'", () => {
+      it('logs an error to the console', () => {
+        config.set('logLevel', LogLevel.WARN);
+
+        printIonError('This is an error message');
+
+        expect(consoleErrorSpy).toHaveBeenCalledWith('[Ionic Error]: This is an error message');
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'OFF'", () => {
+      it('does not log an error to the console', () => {
+        config.set('logLevel', LogLevel.OFF);
+
+        printIonError('This is an error message');
+
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+});