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

38
COMPONENT_INDEX.md
View file

@ -1523,18 +1523,19 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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 | | expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header | | uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute | | href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name | | 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;) | | 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 | | persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| 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` | | 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 |
| 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` | | 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` |
### Slots ### Slots
@ -3289,12 +3290,13 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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 | | 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 | | 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 ### Slots

20
docs/src/COMPONENT_API.json
View file

@ -3842,6 +3842,16 @@
"constant": false, "constant": false,
"reactive": 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", "name": "ref",
"kind": "let", "kind": "let",
@ -8694,6 +8704,16 @@
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": true "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": "{}" }], "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 */ /** Set to `true` to persist the hamburger menu */
export let persistentHamburgerMenu = false; 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 */ /** Obtain a reference to the HTML anchor element */
export let ref = null; export let ref = null;
@ -57,7 +68,9 @@
let winWidth = undefined; let winWidth = undefined;
$: isSideNavOpen = $: isSideNavOpen =
expandedByDefault && winWidth >= 1056 && !persistentHamburgerMenu; expandedByDefault &&
winWidth >= expansionBreakpoint &&
!persistentHamburgerMenu;
$: ariaLabel = company $: ariaLabel = company
? `${company} ` ? `${company} `
: "" + (uiShellAriaLabel || $$props["aria-label"] || platformName); : "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
@ -67,7 +80,7 @@
<header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}"> <header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
<slot name="skip-to-content" /> <slot name="skip-to-content" />
{#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu} {#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
<HamburgerMenu <HamburgerMenu
bind:isOpen="{isSideNavOpen}" bind:isOpen="{isSideNavOpen}"
iconClose="{iconClose}" iconClose="{iconClose}"

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

@ -20,6 +20,17 @@
/** Set to `true` to toggle the expanded state */ /** Set to `true` to toggle the expanded state */
export let isOpen = false; 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 { onMount, createEventDispatcher } from "svelte";
import { shouldRenderHamburgerMenu } from "../navStore"; import { shouldRenderHamburgerMenu } from "../navStore";
@ -53,7 +64,9 @@
class:bx--side-nav__navigation="{true}" class:bx--side-nav__navigation="{true}"
class:bx--side-nav="{true}" class:bx--side-nav="{true}"
class:bx--side-nav--ux="{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--collapsed="{!isOpen && !rail}"
class:bx--side-nav--rail="{rail}" class:bx--side-nav--rail="{rail}"
{...$$restProps} {...$$restProps}

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

@ -43,6 +43,18 @@ export interface HeaderProps
*/ */
persistentHamburgerMenu?: boolean; 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 * Obtain a reference to the HTML anchor element
* @default null * @default null

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

@ -25,6 +25,18 @@ export interface SideNavProps
* @default false * @default false
*/ */
isOpen?: boolean; 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< export default class SideNav extends SvelteComponentTyped<