From 3620f94f97247d20d47a33f4a82ae99270e9fc54 Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Sun, 2 May 2021 15:35:43 -0700 Subject: [PATCH] feat(ui-shell): allow custom hamburger menu icons --- COMPONENT_INDEX.md | 22 ++++++++++++---------- docs/src/COMPONENT_API.json | 18 ++++++++++++++++++ src/UIShell/GlobalHeader/Header.svelte | 22 +++++++++++++++++++++- src/UIShell/SideNav/HamburgerMenu.svelte | 16 +++++++++++++++- types/UIShell/GlobalHeader/Header.d.ts | 12 ++++++++++++ 5 files changed, 78 insertions(+), 12 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index fe6eb1c0..6a1bfd45 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1505,16 +1505,18 @@ 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 | +| 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` | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index a8dbce39..cfbd284f 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -3787,6 +3787,24 @@ "isFunction": false, "constant": false, "reactive": true + }, + { + "name": "iconMenu", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render for the closed state\nDefaults to `Menu20`", + "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconClose", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render for the opened state\nDefaults to `Close20`", + "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false } ], "slots": [ diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte index c106e746..ff74f9bd 100644 --- a/src/UIShell/GlobalHeader/Header.svelte +++ b/src/UIShell/GlobalHeader/Header.svelte @@ -35,6 +35,22 @@ /** Obtain a reference to the HTML anchor element */ export let ref = null; + /** + * Specify the icon from `carbon-icons-svelte` to render for the closed state + * Defaults to `Menu20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconMenu = Menu20; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the opened state + * Defaults to `Close20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconClose = Close20; + + import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte"; + import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte"; import { shouldRenderHamburgerMenu } from "../navStore"; import HamburgerMenu from "../SideNav/HamburgerMenu.svelte"; @@ -52,7 +68,11 @@
{#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu} - + {/if} - + diff --git a/types/UIShell/GlobalHeader/Header.d.ts b/types/UIShell/GlobalHeader/Header.d.ts index 676f328e..237ef161 100644 --- a/types/UIShell/GlobalHeader/Header.d.ts +++ b/types/UIShell/GlobalHeader/Header.d.ts @@ -48,6 +48,18 @@ export interface HeaderProps * @default null */ ref?: null | HTMLAnchorElement; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the closed state + * Defaults to `Menu20` + */ + iconMenu?: typeof import("carbon-icons-svelte").CarbonIcon; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the opened state + * Defaults to `Close20` + */ + iconClose?: typeof import("carbon-icons-svelte").CarbonIcon; } export default class Header extends SvelteComponentTyped<