Page: make 'standard' the default maxWidth option

MIGRATION.md

@@ -28,6 +28,12 @@ The Experimental Alert has been fully removed and we recommend to use the normal
 
 A new `xsmall` breakpoint (`320px`) has been introduced in the `$breakpoints` map exposed by Kirby. The `xsmall` breakpoint replaces the old `small` breakpoint, which is now `632px`.
 
+A `$page-content-max-widths` map has been introduced to support `default`, `optimized` and `full`-width content on Kirby Page. This means that the standalone variable `$page-content-max-width` is deprecated in v9 and `$page-content-max-width-default` should be used in its place.
+For backwards compatability both variables return the `default` value until v10 where `$page-content-max-width` is removed entirely in favor of `$page-content-max-width-default`.
+<br>
+
+Values from the new content-width map can be retrieved with the `get-page-content-max-width()` convenience function, e.g. `get-page-content-max-width('full')`.
+
 ## Version 8.3.0
 
 - [Components](#components-v8-3)

apps/cookbook/src/app/examples/page-example/content-width/page-content-width-example.component.ts

@@ -6,7 +6,6 @@ const fieldsetHtml = `
   <fieldset>
     <legend>Max Width</legend>
     <select (change)="onMaxWidthChange($event.target.value)">
-      <option value="">-</option>
       <option
         *ngFor="let option of maxWidthOptions"
         value="{{ option.value }}"
@@ -42,10 +41,6 @@ export class PageContentWidthExampleComponent extends BasePageExampleComponent {
       text: 'default',
       value: 'default',
     },
-    {
-      text: 'standard',
-      value: 'standard',
-    },
     {
       text: 'optimized',
       value: 'optimized',

apps/cookbook/src/app/showcase/page-showcase/page-showcase.component.ts

@@ -83,7 +83,7 @@ export class PageShowcaseComponent {
       name: 'maxWidth',
       description: 'Sets the max width for the content',
       defaultValue: 'default',
-      type: ['default', 'standard', 'optimized', 'full'],
+      type: ['default', 'optimized', 'full'],
     },
   ];
   events: ApiDescriptionEvent[] = [

libs/core/src/helpers/design-token-helper.ts

@@ -109,6 +109,10 @@ export class DesignTokenHelper {
   public static zLayer(key: keyof typeof styles.zLayers): string {
     return styles.zLayers[key];
   }
+
+  public static pageContentMaxWidth(key: keyof typeof styles.pageContentMaxWidths): string {
+    return styles.pageContentMaxWidths[key];
+  }
 }
 
 export type ThemeColorExtended =

libs/core/src/scss/base/_functions.scss

@@ -88,6 +88,10 @@
   @return $shadow-size;
 }
 
+@function get-page-content-max-width($value) {
+  @return map.get(variables.$page-content-max-widths, $value);
+}
+
 @function _get-shadow-value($shadow, $valuekey) {
   $shadow-value-map: (
     'offset-x': 1,

libs/core/src/scss/base/_variables.scss

@@ -119,7 +119,13 @@ $avatar-badge-size: 16px;
 
 /* Page
 ****************************************************************************/
-$page-content-max-width: 720px;
+$page-content-max-widths: (
+  default: 792px,
+  optimized: 1092px,
+  full: 100%,
+);
+$page-content-max-width-default: map.get($page-content-max-widths, 'default');
+$page-content-max-width: $page-content-max-width-default;
 
 /* Modal
 ****************************************************************************/

libs/designsystem/page/src/page-footer/page-footer.component.scss

@@ -11,7 +11,7 @@ $padding-vertical: utils.size('xxs');
 
   .wrapper {
     position: relative;
-    max-width: var(--page-content-max-width, utils.$page-content-max-width);
+    max-width: var(--page-content-max-width, utils.$page-content-max-width-default);
     margin: 0 auto;
     padding-bottom: var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom));
 

libs/designsystem/page/src/page.component.scss

@@ -208,7 +208,7 @@ ion-back-button {
  * Page Header
  */
 .page-header-container {
-  max-width: var(--page-content-max-width, utils.$page-content-max-width);
+  max-width: var(--page-content-max-width, utils.$page-content-max-width-default);
   margin: 0 auto;
 }
 
@@ -267,20 +267,16 @@ ion-content {
     --padding-top: 0;
   }
 
-  &.max-width-standard {
-    --page-content-max-width: 792px;
-  }
-
   &.max-width-optimized {
-    --page-content-max-width: 1092px;
+    --page-content-max-width: #{utils.get-page-content-max-width('optimized')};
   }
 
   &.max-width-full {
-    --page-content-max-width: 100%;
+    --page-content-max-width: #{utils.get-page-content-max-width('full')};
   }
 
   .content-inner {
-    max-width: var(--page-content-max-width, utils.$page-content-max-width);
+    max-width: var(--page-content-max-width, utils.$page-content-max-width-default);
     margin: 0 auto;
     padding-bottom: utils.size('xl');
   }
@@ -316,7 +312,7 @@ ion-content {
   z-index: utils.z('sticky-content');
 
   div {
-    max-width: var(--page-content-max-width, utils.$page-content-max-width);
+    max-width: var(--page-content-max-width, utils.$page-content-max-width-default);
     margin: 0 auto;
   }
 

libs/designsystem/page/src/page.component.spec.ts

@@ -793,7 +793,7 @@ describe('PageComponent', () => {
         await TestHelper.whenReady(ionContent);
         const contentInner = ionContent.querySelector('.content-inner');
         expect(contentInner).toHaveComputedStyle({
-          'max-width': '720px',
+          'max-width': DesignTokenHelper.pageContentMaxWidth('default'),
         });
       });
 
@@ -807,7 +807,7 @@ describe('PageComponent', () => {
           await TestHelper.whenReady(ionContent);
           const contentInner = ionContent.querySelector('.content-inner');
           expect(contentInner).toHaveComputedStyle({
-            'max-width': '792px',
+            'max-width': DesignTokenHelper.pageContentMaxWidth('default'),
           });
         });
       });
@@ -822,7 +822,7 @@ describe('PageComponent', () => {
           await TestHelper.whenReady(ionContent);
           const contentInner = ionContent.querySelector('.content-inner');
           expect(contentInner).toHaveComputedStyle({
-            'max-width': '1092px',
+            'max-width': DesignTokenHelper.pageContentMaxWidth('optimized'),
           });
         });
       });
@@ -837,7 +837,7 @@ describe('PageComponent', () => {
           await TestHelper.whenReady(ionContent);
           const contentInner = ionContent.querySelector('.content-inner');
           expect(contentInner).toHaveComputedStyle({
-            'max-width': '100%',
+            'max-width': DesignTokenHelper.pageContentMaxWidth('full'),
           });
         });
       });

libs/designsystem/page/src/page.component.ts

@@ -69,6 +69,10 @@ const contentScrolledOffsetInPixels = 4;
 
 type stickyConfig = { sticky: boolean };
 type fixedConfig = { fixed: boolean };
+type MaxWidth = 'default' | 'standard' | 'optimized' | 'full';
+
+const PAGE_WIDTH_STANDARD_DEPRECATION_WARNING =
+  'Deprecation warning: The support for "standard" as a maxWidth option will be removed in Kirby version 10. After that the "standard" width will be the default width and does not need to be specified.';
 
 export const PAGE_BACK_BUTTON_OVERRIDE = new InjectionToken<PageBackButtonOverride>(
   'page-back-button-override'
@@ -225,9 +229,22 @@ export class PageComponent
   @Input() defaultBackHref: string;
   @Input() hideBackButton: boolean;
   @Input() titleMaxLines: number;
-  @Input() maxWidth: 'default' | 'standard' | 'optimized' | 'full' = 'default';
   @Input() hasInteractiveTitle: boolean;
 
+  @Input() set maxWidth(width: MaxWidth) {
+    if (width === 'standard') {
+      console.warn(PAGE_WIDTH_STANDARD_DEPRECATION_WARNING);
+    }
+
+    this._maxWidth = width;
+  }
+
+  get maxWidth(): MaxWidth {
+    return this._maxWidth;
+  }
+
+  private _maxWidth: MaxWidth = 'default';
+
   private _tabBarBottomHidden: boolean;
   public get tabBarBottomHidden(): boolean {
     return this._tabBarBottomHidden;

libs/designsystem/src/lib/components/page-local-navigation/page-local-navigation.component.scss

@@ -4,7 +4,7 @@ $tab-item-text-max-width: 100px;
 $bottom-border-height: 1px;
 $border-color-standard: utils.get-color('medium');
 $border-color-selected: utils.get-color('dark');
-$divider-max-width-breakpoint: utils.$page-content-max-width + (utils.size('s') * 2);
+$divider-max-width-breakpoint: utils.$page-content-max-width-default + (utils.size('s') * 2);
 
 .tab-bar {
   position: relative;
@@ -33,7 +33,7 @@ $divider-max-width-breakpoint: utils.$page-content-max-width + (utils.size('s')
 .container {
   position: relative;
   background-color: utils.get-color('background-color');
-  max-width: var(--page-content-max-width, utils.$page-content-max-width);
+  max-width: var(--page-content-max-width, utils.$page-content-max-width-default);
 
   // Divider
   &::before {

libs/designsystem/tab-navigation/src/tab-navigation/tab-navigation.component.scss

@@ -2,7 +2,7 @@
 
 $bottom-border-height: 1px;
 $border-color-standard: utils.get-color('medium');
-$divider-max-width-breakpoint: utils.$page-content-max-width + (utils.size('s') * 2);
+$divider-max-width-breakpoint: utils.$page-content-max-width-default + (utils.size('s') * 2);
 
 :host {
   display: block;