mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Closes #715
This commit is contained in:
Eric Liu 2021-07-05 08:44:21 -07:00 • committed by GitHub
commit a62e9c0c3c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 93 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

6
COMPONENT_INDEX.md
View file

@ -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

20
docs/src/COMPONENT_API.json
View file

@ -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": "{}" }],

17
src/UIShell/GlobalHeader/Header.svelte
View file

@ -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}"

15
src/UIShell/SideNav/SideNav.svelte
View file

@ -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}

12
types/UIShell/GlobalHeader/Header.d.ts vendored
View file

@ -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

12
types/UIShell/SideNav/SideNav.d.ts vendored
View file

@ -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<