Skip to content

Commit

Permalink
fix(ld-sidenav): icon not showing in tooltips
Browse files Browse the repository at this point in the history
  • Loading branch information
@renet @borisdiakur
renet authored and borisdiakur committed Apr 11, 2023
1 parent ad58755 commit 1a204de
Show file tree
Hide file tree
Showing 5 changed files with 18 additions and 20 deletions.
8 changes: 4 additions & 4 deletions src/liquid/components/ld-badge/test/__snapshots__/ld-badge.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`ld-badge renders 1`] = `
<ld-badge class="ld-badge" icon="checkmark">
<mock:shadow-root>
<ld-icon class="ld-badge__icon ld-icon" part="icon" role="presentation">
<ld-icon class="ld-badge__icon ld-icon" name="checkmark" part="icon" role="presentation">
<mock:shadow-root>
Not Found
</mock:shadow-root>
Expand All @@ -17,7 +17,7 @@ exports[`ld-badge renders 1`] = `
exports[`ld-badge renders on brand color 1`] = `
<ld-badge brand-color="" class="ld-badge ld-badge--brand-color" icon="checkmark">
<mock:shadow-root>
<ld-icon class="ld-badge__icon ld-icon" part="icon" role="presentation">
<ld-icon class="ld-badge__icon ld-icon" name="checkmark" part="icon" role="presentation">
<mock:shadow-root>
Not Found
</mock:shadow-root>
Expand Down Expand Up @@ -48,7 +48,7 @@ exports[`ld-badge renders with custom icon 1`] = `
exports[`ld-badge renders with size lg 1`] = `
<ld-badge class="ld-badge ld-badge--lg" icon="checkmark" size="lg">
<mock:shadow-root>
<ld-icon class="ld-badge__icon ld-icon" part="icon" role="presentation">
<ld-icon class="ld-badge__icon ld-icon" name="checkmark" part="icon" role="presentation">
<mock:shadow-root>
Not Found
</mock:shadow-root>
Expand Down Expand Up @@ -91,7 +91,7 @@ exports[`ld-badge updates after addition of an icon 1`] = `
exports[`ld-badge updates after addition of text 1`] = `
<ld-badge class="ld-badge ld-badge--with-text" icon="checkmark">
<mock:shadow-root>
<ld-icon class="ld-badge__icon ld-icon" part="icon" role="presentation">
<ld-icon class="ld-badge__icon ld-icon" name="checkmark" part="icon" role="presentation">
<mock:shadow-root>
Not Found
</mock:shadow-root>
Expand Down
2 changes: 1 addition & 1 deletion src/liquid/components/ld-icon/ld-icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export class LdIcon {
@Element() el: HTMLElement

/** The icon name. */
@Prop() name?: string = null
@Prop({ reflect: true }) name?: string = null

/** Size of the icon. */
@Prop() size?: 'sm' | 'lg'
Expand Down
10 changes: 5 additions & 5 deletions src/liquid/components/ld-icon/test/__snapshots__/ld-icon.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@

exports[`ld-icon renders multiple 1`] = `
<body>
<ld-icon class="ld-icon" role="presentation">
<ld-icon class="ld-icon" name="add" role="presentation">
<mock:shadow-root>
Not Found
</mock:shadow-root>
</ld-icon>
<ld-icon class="ld-icon" role="presentation">
<ld-icon class="ld-icon" name="education" role="presentation">
<mock:shadow-root>
Not Found
</mock:shadow-root>
</ld-icon>
<ld-icon class="ld-icon" role="presentation">
<ld-icon class="ld-icon" name="add" role="presentation">
<mock:shadow-root>
Not Found
</mock:shadow-root>
Expand All @@ -21,15 +21,15 @@ exports[`ld-icon renders multiple 1`] = `
`;

exports[`ld-icon renders with name prop 1`] = `
<ld-icon class="ld-icon" role="presentation">
<ld-icon class="ld-icon" name="add" role="presentation">
<mock:shadow-root>
Not Found
</mock:shadow-root>
</ld-icon>
`;

exports[`ld-icon renders with size prop 1`] = `
<ld-icon class="ld-icon ld-icon--sm" role="presentation">
<ld-icon class="ld-icon ld-icon--sm" name="atom" role="presentation">
<mock:shadow-root>
Not Found
</mock:shadow-root>
Expand Down
2 changes: 1 addition & 1 deletion src/liquid/components/ld-stepper/ld-step/test/__snapshots__/ld-step.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ exports[`ld-step renders with custom icon 1`] = `
<button class="ld-step__focusable-element" part="button focusable" type="button">
<slot></slot>
</button>
<ld-icon class="ld-icon" role="presentation">
<ld-icon class="ld-icon" name="favorite" role="presentation">
<mock:shadow-root>
Not Found
</mock:shadow-root>
Expand Down
16 changes: 7 additions & 9 deletions src/liquid/components/ld-tooltip/ld-tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
} from '@stencil/core'
import { getClassNames } from '../../utils/getClassNames'
import { focusableSelector, isInnerFocusable } from '../../utils/focus'
import { isElement, isSlot } from '../../utils/type-checking'

export type Position =
| 'bottom center'
Expand All @@ -30,9 +31,6 @@ export type Position =
| 'top right'

let tooltipCount = 0
const isElement = (node: Node): node is Element => 'classList' in node
const isSlot = (element: Element): element is HTMLSlotElement =>
element && element.tagName === 'SLOT'

const mapPositionToAttachment = (position: Position) => {
return {
Expand Down Expand Up @@ -64,14 +62,14 @@ const mapPositionToTargetAttachment = (position: Position) => {
)
}

const copySlottedNodes = (node: Element) => {
const copySlottedNodes = (node: Node) => {
// text node
if (!('querySelectorAll' in node)) {
if (!isElement(node)) {
return
}

node.querySelectorAll('slot').forEach((slot) => {
slot.assignedNodes().forEach((childNode: Element) => {
slot.assignedNodes().forEach((childNode) => {
copySlottedNodes(childNode)
slot.parentElement.insertBefore(childNode, slot)
})
Expand Down Expand Up @@ -162,7 +160,7 @@ export class LdTooltip {
private syncContent = () => {
const tooltipContent = this.contentRef.querySelector('slot').assignedNodes()

tooltipContent.forEach((node: Element) => {
tooltipContent.forEach((node) => {
copySlottedNodes(node)
const clonedNode = node.cloneNode(true)
this.tooltipRef.appendChild(clonedNode)
Expand Down Expand Up @@ -331,9 +329,9 @@ export class LdTooltip {
}

private findFirstSlottedTrigger = () => {
let triggerInSlot: Element = this.el.querySelector('[slot="trigger"]')
let triggerInSlot = this.el.querySelector('[slot="trigger"]')

while (isSlot(triggerInSlot)) {
while (triggerInSlot && isSlot(triggerInSlot)) {
triggerInSlot = triggerInSlot.assignedElements()[0]
}

Expand Down

1 comment on commit 1a204de

@vercel
Copy link

@vercel vercel bot commented on 1a204de Apr 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

liquid – ./

liquid-oxygen.vercel.app
liquid-uxsd.vercel.app
liquid-git-main-uxsd.vercel.app

Please sign in to comment.