feat(ui-shell): export expansionBreakpoint as a prop in Header, SideNav #715 (#723)

Closes #715

COMPONENT_INDEX.md

@@ -1524,7 +1524,7 @@ None.
 ### Props
 
 | Prop name               | Kind             | Reactive | Type                                                         | Default value      | Description                                                                                                                                                                                                                                                      |
-| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
+| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | ref                     | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                   | <code>null</code>  | Obtain a reference to the HTML anchor element                                                                                                                                                                                                                    |
 | isSideNavOpen           | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code> | Set to `true` to open the side nav                                                                                                                                                                                                                               |
 | expandedByDefault       | <code>let</code> | No       | <code>boolean</code>                                         | <code>true</code>  | Set to `false` to hide the side nav by default                                                                                                                                                                                                                   |
@@ -1533,6 +1533,7 @@ None.
 | company                 | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the company name                                                                                                                                                                                                                                         |
 | platformName            | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>    | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;)                                                                                                                                 |
 | persistentHamburgerMenu | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to persist the hamburger menu                                                                                                                                                                                                                      |
+| expansionBreakpoint     | <code>let</code> | No       | <code>number</code>                                          | <code>1056</code>  | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
 | iconMenu                | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render for the closed state<br />Defaults to `Menu20`                                                                                                                                                             |
 | iconClose               | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render for the opened state<br />Defaults to `Close20`                                                                                                                                                            |
 
@@ -3290,11 +3291,12 @@ None.
 ### Props
 
 | Prop name           | Kind             | Reactive | Type                 | Default value      | Description                                                                                                                                                                                                                                                      |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ |
+| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | isOpen              | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state                                                                                                                                                                                                                       |
 | fixed               | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the fixed variant                                                                                                                                                                                                                           |
 | rail                | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the rail variant                                                                                                                                                                                                                            |
 | ariaLabel           | <code>let</code> | No       | <code>string</code>  | --                 | Specify the ARIA label for the nav                                                                                                                                                                                                                               |
+| expansionBreakpoint | <code>let</code> | No       | <code>number</code>  | <code>1056</code>  | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -3842,6 +3842,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "expansionBreakpoint",
+          "kind": "let",
+          "description": "The window width (px) at which the SideNav is expanded and the hamburger menu is hidden\n1056 represents the \"large\" breakpoint in pixels from the Carbon Design System:\nsmall: 320\nmedium: 672\nlarge: 1056\nx-large: 1312\nmax: 1584",
+          "type": "number",
+          "value": "1056",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "ref",
           "kind": "let",
@@ -8694,6 +8704,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": true
+        },
+        {
+          "name": "expansionBreakpoint",
+          "kind": "let",
+          "description": "The window width (px) at which the SideNav is expanded and the hamburger menu is hidden\n1056 represents the \"large\" breakpoint in pixels from the Carbon Design System:\nsmall: 320\nmedium: 672\nlarge: 1056\nx-large: 1312\nmax: 1584",
+          "type": "number",
+          "value": "1056",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],

src/UIShell/GlobalHeader/Header.svelte

@@ -32,6 +32,17 @@
   /** Set to `true` to persist the hamburger menu */
   export let persistentHamburgerMenu = false;
 
+  /**
+   * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
+   * 1056 represents the "large" breakpoint in pixels from the Carbon Design System:
+   * small: 320
+   * medium: 672
+   * large: 1056
+   * x-large: 1312
+   * max: 1584
+   */
+  export let expansionBreakpoint = 1056;
+
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
@@ -57,7 +68,9 @@
   let winWidth = undefined;
 
   $: isSideNavOpen =
-    expandedByDefault && winWidth >= 1056 && !persistentHamburgerMenu;
+    expandedByDefault &&
+    winWidth >= expansionBreakpoint &&
+    !persistentHamburgerMenu;
   $: ariaLabel = company
     ? `${company} `
     : "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
@@ -67,7 +80,7 @@
 
 <header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
   <slot name="skip-to-content" />
-  {#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu}
+  {#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
     <HamburgerMenu
       bind:isOpen="{isSideNavOpen}"
       iconClose="{iconClose}"

src/UIShell/SideNav/SideNav.svelte

@@ -20,6 +20,17 @@
   /** Set to `true` to toggle the expanded state */
   export let isOpen = false;
 
+  /**
+   * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
+   * 1056 represents the "large" breakpoint in pixels from the Carbon Design System:
+   * small: 320
+   * medium: 672
+   * large: 1056
+   * x-large: 1312
+   * max: 1584
+   */
+  export let expansionBreakpoint = 1056;
+
   import { onMount, createEventDispatcher } from "svelte";
   import { shouldRenderHamburgerMenu } from "../navStore";
 
@@ -53,7 +64,9 @@
   class:bx--side-nav__navigation="{true}"
   class:bx--side-nav="{true}"
   class:bx--side-nav--ux="{true}"
-  class:bx--side-nav--expanded="{rail && winWidth >= 1056 ? false : isOpen}"
+  class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
+    ? false
+    : isOpen}"
   class:bx--side-nav--collapsed="{!isOpen && !rail}"
   class:bx--side-nav--rail="{rail}"
   {...$$restProps}

types/UIShell/GlobalHeader/Header.d.ts

@@ -43,6 +43,18 @@ export interface HeaderProps
    */
   persistentHamburgerMenu?: boolean;
 
+  /**
+   * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
+   * 1056 represents the "large" breakpoint in pixels from the Carbon Design System:
+   * small: 320
+   * medium: 672
+   * large: 1056
+   * x-large: 1312
+   * max: 1584
+   * @default 1056
+   */
+  expansionBreakpoint?: number;
+
   /**
    * Obtain a reference to the HTML anchor element
    * @default null

types/UIShell/SideNav/SideNav.d.ts

@@ -25,6 +25,18 @@ export interface SideNavProps
    * @default false
    */
   isOpen?: boolean;
+
+  /**
+   * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
+   * 1056 represents the "large" breakpoint in pixels from the Carbon Design System:
+   * small: 320
+   * medium: 672
+   * large: 1056
+   * x-large: 1312
+   * max: 1584
+   * @default 1056
+   */
+  expansionBreakpoint?: number;
 }
 
 export default class SideNav extends SvelteComponentTyped<