From a62e9c0c3c178cdf96be7502263e3237472a70e8 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Mon, 5 Jul 2021 08:44:21 -0700 Subject: [PATCH] feat(ui-shell): export expansionBreakpoint as a prop in Header, SideNav #715 (#723) Closes #715 --- COMPONENT_INDEX.md | 38 ++++++++++++++------------ docs/src/COMPONENT_API.json | 20 ++++++++++++++ src/UIShell/GlobalHeader/Header.svelte | 17 ++++++++++-- src/UIShell/SideNav/SideNav.svelte | 15 +++++++++- types/UIShell/GlobalHeader/Header.d.ts | 12 ++++++++ types/UIShell/SideNav/SideNav.d.ts | 12 ++++++++ 6 files changed, 93 insertions(+), 21 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 091a5b0c..362b8628 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1523,18 +1523,19 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | -| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | -| uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header | -| href | let | No | string | -- | Specify the `href` attribute | -| company | let | No | string | -- | Specify the company name | -| platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) | -| persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu | -| iconMenu | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the closed state
Defaults to `Menu20` | -| iconClose | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the opened state
Defaults to `Close20` | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | +| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | +| uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header | +| href | let | No | string | -- | Specify the `href` attribute | +| company | let | No | string | -- | Specify the company name | +| platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) | +| persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu | +| expansionBreakpoint | let | No | number | 1056 | 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 | +| iconMenu | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the closed state
Defaults to `Menu20` | +| iconClose | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the opened state
Defaults to `Close20` | ### Slots @@ -3289,12 +3290,13 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ | -| isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state | -| fixed | let | No | boolean | false | Set to `true` to use the fixed variant | -| rail | let | No | boolean | false | Set to `true` to use the rail variant | -| ariaLabel | let | No | string | -- | Specify the ARIA label for the nav | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state | +| fixed | let | No | boolean | false | Set to `true` to use the fixed variant | +| rail | let | No | boolean | false | Set to `true` to use the rail variant | +| ariaLabel | let | No | string | -- | Specify the ARIA label for the nav | +| expansionBreakpoint | let | No | number | 1056 | 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 | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 294ce682..ddc88e81 100644 --- a/docs/src/COMPONENT_API.json +++ b/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": "{}" }], diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte index ff74f9bd..2241bb71 100644 --- a/src/UIShell/GlobalHeader/Header.svelte +++ b/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 @@
- {#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu} + {#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}