Skip to content

Commit

Permalink
fix(ld-sidenav): add tetherOptions prop to elements containing a tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisdiakur
borisdiakur committed Jan 2, 2023
1 parent c8c6b8f commit 02f80e0
Show file tree
Hide file tree
Showing 6 changed files with 42 additions and 26 deletions.
4 changes: 4 additions & 0 deletions src/liquid/components/ld-sidenav/ld-sidenav-header/ld-sidenav-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ export class LdSidenavHeader {
/** Label to be used for the toggle button when navigation is collapsed. */
@Prop() labelExpand = 'Expand side navigation'

/** Tooltip tether options object to be merged with the default options (optionally stringified). */
@Prop() tetherOptions?: Partial<Tether.ITetherOptions> | string

@State() sidenavAlignement: 'left' | 'right'
@State() sidenavClosable: boolean
@State() sidenavCollapsed: boolean
Expand Down Expand Up @@ -126,6 +129,7 @@ export class LdSidenavHeader {
this.sidenavAlignement === 'left' ? 'right middle' : 'left middle'
}
tag="span"
tetherOptions={this.tetherOptions}
>
<button
slot="trigger"
Expand Down
17 changes: 9 additions & 8 deletions src/liquid/components/ld-sidenav/ld-sidenav-header/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,15 @@ If your logo takes up a lot of horizontal space, you can omit the title and use

## Properties

| Property | Attribute | Description | Type | Default |
| --------------- | ---------------- | ---------------------------------------------------------------------- | ------------------ | ---------------------------- |
| `ariaLabel` | `aria-label` | aria-label to be used on the anchor element within the sidenav header. | `string` | `undefined` |
| `href` | `href` | href to be used on the anchor element within the sidenav header. | `string` | `undefined` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `labelCollapse` | `label-collapse` | Label to be used for the toggle button when navigation is expanded. | `string` | `'Collapse side navigation'` |
| `labelExpand` | `label-expand` | Label to be used for the toggle button when navigation is collapsed. | `string` | `'Expand side navigation'` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| Property | Attribute | Description | Type | Default |
| --------------- | ---------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- |
| `ariaLabel` | `aria-label` | aria-label to be used on the anchor element within the sidenav header. | `string` | `undefined` |
| `href` | `href` | href to be used on the anchor element within the sidenav header. | `string` | `undefined` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `labelCollapse` | `label-collapse` | Label to be used for the toggle button when navigation is expanded. | `string` | `'Collapse side navigation'` |
| `labelExpand` | `label-expand` | Label to be used for the toggle button when navigation is collapsed. | `string` | `'Expand side navigation'` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `tetherOptions` | `tether-options` | Tooltip tether options object to be merged with the default options (optionally stringified). | `string \| { attachment?: string; bodyElement?: HTMLElement; classes?: { [className: string]: string \| boolean; }; classPrefix?: string; constraints?: ITetherConstraint[]; element?: any; enabled?: boolean; offset?: string; optimizations?: any; target?: any; targetAttachment?: string; targetOffset?: string; targetModifier?: string; }` | `undefined` |


## Events
Expand Down
5 changes: 5 additions & 0 deletions src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { getClassNames } from '../../../utils/getClassNames'
import { closest } from '../../../utils/closest'
import { toggleStackToTop } from '../utils/toggleStackToTop'
import { LdTooltip } from '../../ld-tooltip/ld-tooltip'
import Tether from 'tether'

/**
* @slot - default slot for the nav item label.
Expand Down Expand Up @@ -70,6 +71,9 @@ export class LdSidenavNavitem implements InnerFocusable {
*/
@Prop() target?: '_blank' | '_self' | '_parent' | '_top'

/** Tooltip tether options object to be merged with the default options (optionally stringified). */
@Prop() tetherOptions?: Partial<Tether.ITetherOptions> | string

/** Accepts an id of an ld-subnav component to navigate to it on click. */
@Prop({ reflect: true }) to?: string

Expand Down Expand Up @@ -306,6 +310,7 @@ export class LdSidenavNavitem implements InnerFocusable {
position={
this.sidenavAlignement === 'left' ? 'right middle' : 'left middle'
}
tetherOptions={this.tetherOptions}
tag="span"
>
<div class="ld-sidenav-navitem__tooltip-trigger" slot="trigger" />
Expand Down
Loading

1 comment on commit 02f80e0

@vercel
Copy link

@vercel vercel bot commented on 02f80e0 Jan 2, 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-git-main-uxsd.vercel.app
liquid-oxygen.vercel.app
liquid-uxsd.vercel.app

Please sign in to comment.