mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(context-menu): update context menu classes #684

Browse source
This commit is contained in:
Eric Y Liu 2021-06-27 08:12:47 -07:00
commit 47dd26b88e
3 changed files with 21 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/ContextMenu/ContextMenu.svelte
View file

@ -79,6 +79,7 @@
<svelte:window
on:contextmenu|preventDefault="{(e) => {
if (level > 1) return;
if (!ref) return;
const { height, width } = ref.getBoundingClientRect();
@ -117,10 +118,10 @@
tabindex="-1"
data-direction="{direction}"
data-level="{level}"
class:bx--context-menu="{true}"
class:bx--context-menu--open="{open}"
class:bx--context-menu--invisible="{open && x === 0 && y === 0}"
class:bx--context-menu--root="{level === 1}"
class:bx--menu="{true}"
class:bx--menu--open="{open}"
class:bx--menu--invisible="{open && x === 0 && y === 0}"
class:bx--menu--root="{level === 1}"
{...$$restProps}
style="left: {x}px; top: {y}px; {$$restProps.style}"
on:click

2
src/ContextMenu/ContextMenuDivider.svelte
View file

@ -1 +1 @@
<li role="separator" class:bx--context-menu-divider="{true}"></li>
<li role="separator" class:bx--menu-divider="{true}"></li>

30
src/ContextMenu/ContextMenuOption.svelte
View file

@ -173,14 +173,14 @@
aria-disabled="{!subOptions && disabled}"
aria-haspopup="{subOptions ? true : undefined}"
aria-expanded="{subOptions ? submenuOpen : undefined}"
class:bx--context-menu-option="{true}"
class:bx--context-menu-option--disabled="{true}"
class:bx--context-menu-option--active="{subOptions && submenuOpen}"
class:bx--context-menu-option--danger="{!subOptions && kind === 'danger'}"
class:bx--menu-option="{true}"
class:bx--menu-option--disabled="{true}"
class:bx--menu-option--active="{subOptions && submenuOpen}"
class:bx--menu-option--danger="{!subOptions && kind === 'danger'}"
indented="{indented}"
aria-checked="{isSelectable || isRadio ? selected : undefined}"
data-nested="{ref &&
ref.closest('.bx--context-menu').getAttribute('data-level') === '2'}"
ref.closest('.bx--menu').getAttribute('data-level') === '2'}"
data-sub="{subOptions}"
data-id="{id}"
{...$$restProps}
@ -240,18 +240,18 @@
>
{#if subOptions}
<div
class:bx--context-menu-option__content="{true}"
class:bx--context-menu-option__content--disabled="{disabled}"
class:bx--menu-option__content="{true}"
class:bx--menu-option__content--disabled="{disabled}"
>
{#if indented}
<div class:bx--context-menu-option__icon="{true}">
<div class:bx--menu-option__icon="{true}">
<svelte:component this="{icon}" />
</div>
{/if}
<span class:bx--context-menu-option__label="{true}" title="{labelText}">
<span class:bx--menu-option__label="{true}" title="{labelText}">
<slot name="labelText">{labelText}</slot>
</span>
<div class:bx--context-menu-option__info="{true}"><CaretRight16 /></div>
<div class:bx--menu-option__info="{true}"><CaretRight16 /></div>
</div>
<ContextMenu
@ -263,18 +263,18 @@
</ContextMenu>
{:else}
<div
class:bx--context-menu-option__content="{true}"
class:bx--context-menu-option__content--disabled="{disabled}"
class:bx--menu-option__content="{true}"
class:bx--menu-option__content--disabled="{disabled}"
>
{#if indented}
<div class:bx--context-menu-option__icon="{true}">
<div class:bx--menu-option__icon="{true}">
<svelte:component this="{icon}" />
</div>
{/if}
<span class:bx--context-menu-option__label="{true}" title="{labelText}">
<span class:bx--menu-option__label="{true}" title="{labelText}">
<slot name="labelText">{labelText}</slot>
</span>
<div class:bx--context-menu-option__info="{true}">
<div class:bx--menu-option__info="{true}">
<slot name="shortcutText">{shortcutText}</slot>
</div>
</div>