UIShell components: rename "isOpen" prop to "open"

This commit is contained in:
Davi Seidel Brandão 2024-01-02 10:32:02 -03:00
commit de0f448ad1
4 changed files with 21 additions and 21 deletions

View file

@ -6,7 +6,7 @@
export let ariaLabel = undefined; export let ariaLabel = undefined;
/** Set to `true` to toggle the open state */ /** Set to `true` to toggle the open state */
export let isOpen = false; export let open = false;
/** /**
* Specify the icon to render for the closed state. * Specify the icon to render for the closed state.
@ -39,7 +39,7 @@
class:bx--header__menu-toggle="{true}" class:bx--header__menu-toggle="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:click="{() => (isOpen = !isOpen)}" on:click="{() => (open = !open)}"
> >
<svelte:component this="{isOpen ? iconClose : iconMenu}" size="{20}" /> <svelte:component this="{open ? iconClose : iconMenu}" size="{20}" />
</button> </button>

View file

@ -84,7 +84,7 @@
<slot name="skip-to-content" /> <slot name="skip-to-content" />
{#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu} {#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
<HamburgerMenu <HamburgerMenu
bind:isOpen="{isSideNavOpen}" bind:open="{isSideNavOpen}"
iconClose="{iconClose}" iconClose="{iconClose}"
iconMenu="{iconMenu}" iconMenu="{iconMenu}"
/> />

View file

@ -5,7 +5,7 @@
*/ */
/** Set to `true` to open the panel */ /** Set to `true` to open the panel */
export let isOpen = false; export let open = false;
/** /**
* Specify the icon to render when the action panel is closed. * Specify the icon to render when the action panel is closed.
@ -54,12 +54,12 @@
<svelte:window <svelte:window
on:click="{({ target }) => { on:click="{({ target }) => {
if ( if (
isOpen && open &&
!ref.contains(target) && !ref.contains(target) &&
!refPanel.contains(target) && !refPanel.contains(target) &&
!preventCloseOnClickOutside !preventCloseOnClickOutside
) { ) {
isOpen = false; open = false;
dispatch('close'); dispatch('close');
} }
}}" }}"
@ -69,16 +69,16 @@
bind:this="{ref}" bind:this="{ref}"
type="button" type="button"
class:bx--header__action="{true}" class:bx--header__action="{true}"
class:bx--header__action--active="{isOpen}" class:bx--header__action--active="{open}"
class:action-text="{text}" class:action-text="{text}"
{...$$restProps} {...$$restProps}
on:click on:click
on:click|stopPropagation="{() => { on:click|stopPropagation="{() => {
isOpen = !isOpen; open = !open;
dispatch(isOpen ? 'open' : 'close'); dispatch(open ? 'open' : 'close');
}}" }}"
> >
{#if isOpen} {#if open}
<slot name="closeIcon"> <slot name="closeIcon">
<svelte:component this="{closeIcon}" size="{20}" /> <svelte:component this="{closeIcon}" size="{20}" />
</slot> </slot>
@ -91,7 +91,7 @@
{#if text}<span>{text}</span>{/if} {#if text}<span>{text}</span>{/if}
</slot> </slot>
</button> </button>
{#if isOpen} {#if open}
<div <div
bind:this="{refPanel}" bind:this="{refPanel}"
class:bx--header-panel="{true}" class:bx--header-panel="{true}"

View file

@ -18,7 +18,7 @@
export let ariaLabel = undefined; export let ariaLabel = undefined;
/** Set to `true` to toggle the expanded state */ /** Set to `true` to toggle the expanded state */
export let isOpen = false; export let open = false;
/** /**
* The window width (px) at which the SideNav is expanded and the hamburger menu is hidden. * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
@ -42,8 +42,8 @@
let winWidth = undefined; let winWidth = undefined;
$: dispatch(isOpen ? "open" : "close"); $: dispatch(open ? "open" : "close");
$: $isSideNavCollapsed = !isOpen; $: $isSideNavCollapsed = !open;
$: $isSideNavRail = rail; $: $isSideNavRail = rail;
onMount(() => { onMount(() => {
@ -60,23 +60,23 @@
<div <div
on:click="{() => { on:click="{() => {
dispatch('click:overlay'); dispatch('click:overlay');
isOpen = false; open = false;
}}" }}"
class:bx--side-nav__overlay="{true}" class:bx--side-nav__overlay="{true}"
class:bx--side-nav__overlay-active="{isOpen}" class:bx--side-nav__overlay-active="{open}"
style:z-index="{isOpen ? 6000 : undefined}" style:z-index="{open ? 6000 : undefined}"
></div> ></div>
{/if} {/if}
<nav <nav
aria-hidden="{!isOpen}" aria-hidden="{!open}"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
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 >= expansionBreakpoint class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
? false ? false
: isOpen}" : open}"
class:bx--side-nav--collapsed="{!isOpen && !rail}" class:bx--side-nav--collapsed="{!open && !rail}"
class:bx--side-nav--rail="{rail}" class:bx--side-nav--rail="{rail}"
{...$$restProps} {...$$restProps}
> >