Skip to content

Commit

Permalink
feat(ld-select, ld-tooltip): tetherOptions prop as object
Browse files Browse the repository at this point in the history
  • Loading branch information
@renet
renet authored Jul 7, 2022
1 parent cb74cd2 commit c2dd94c
Show file tree
Hide file tree
Showing 8 changed files with 250 additions and 49 deletions.
19 changes: 11 additions & 8 deletions src/liquid/components/ld-select/ld-select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@ export class LdSelect implements InnerFocusable {
/** Size of the select trigger button. */
@Prop() size?: 'sm' | 'lg'

/** Stringified tether options object to be merged with the default options. */
@Prop({ mutable: true }) tetherOptions = '{}'
/** Tether options object to be merged with the default options (optionally stringified). */
@Prop() tetherOptions?: Partial<Tether.ITetherOptions> | string

@State() ariaDisabled = false
@State() expanded = false
Expand Down Expand Up @@ -297,7 +297,7 @@ export class LdSelect implements InnerFocusable {
.toString()
.split(' ')
.find((cl) => cl.startsWith('ld-theme-'))
?.substr(9)
?.substring(9)
})
}

Expand All @@ -309,10 +309,11 @@ export class LdSelect implements InnerFocusable {
}

private initPopper() {
let customTetherOptions = {}
customTetherOptions = JSON.parse(this.tetherOptions)

this.popper = new Tether({
const customTetherOptions: Partial<Tether.ITetherOptions> =
typeof this.tetherOptions === 'string'
? JSON.parse(this.tetherOptions)
: this.tetherOptions
const tetherOptions: Tether.ITetherOptions = {
classPrefix: 'ld-tether',
element: this.listboxRef,
target: this.selectRef,
Expand All @@ -326,7 +327,9 @@ export class LdSelect implements InnerFocusable {
},
],
...customTetherOptions,
})
}

this.popper = new Tether(tetherOptions)

this.listboxRef.classList.add('ld-select__popper--initialized')
}
Expand Down
40 changes: 20 additions & 20 deletions src/liquid/components/ld-select/readme.md
View file

Large diffs are not rendered by default.

109 changes: 108 additions & 1 deletion src/liquid/components/ld-select/test/__snapshots__/ld-select.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,6 +368,113 @@ exports[`ld-select observes slot content changes and updates internal options in
</body>
`;
exports[`ld-select places the popper inside a given element 1`] = `
<body>
<form>
<ld-select multiple="" name="fruit" placeholder="Pick a fruit">
<mock:shadow-root>
<div class="ld-select ld-select--expanded" part="root" style="z-index: 2147483647;">
<slot name="hidden"></slot>
<div class="ld-select__slot-container" part="slot-container">
<slot></slot>
</div>
<div class="ld-select__select ld-tether-element-attached-left ld-tether-element-attached-top ld-tether-enabled ld-tether-target ld-tether-target-attached-bottom ld-tether-target-attached-left" part="select">
<div aria-disabled="false" aria-expanded="true" aria-haspopup="listbox" aria-label="Pick a fruit" class="ld-select__btn-trigger" part="btn-trigger focusable" role="button" tabindex="0">
<span class="ld-select__btn-trigger-text-wrapper" part="trigger-text-wrapper" title="Pick a fruit">
<span class="ld-select__btn-trigger-text" part="trigger-text">
Pick a fruit
</span>
</span>
<slot name="icon"></slot>
<svg class="ld-select__icon ld-select__icon--rotated" part="trigger-icon" role="presentation" viewBox="0 0 16 16">
<path d="M3 6l5 4 5-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path>
</svg>
</div>
<div class="ld-tether-target-marker">
<div class="ld-tether-marker-dot" style="top: 0px; left: 0px;"></div>
</div>
</div>
</div>
</mock:shadow-root>
<ld-option class="ld-option" value="apple">
<mock:shadow-root>
<slot></slot>
</mock:shadow-root>
Apple
</ld-option>
<ld-option class="ld-option" value="pear">
<mock:shadow-root>
<slot></slot>
</mock:shadow-root>
Pear
</ld-option>
<ld-option class="ld-option" value="banana">
<mock:shadow-root>
<slot></slot>
</mock:shadow-root>
Banana
</ld-option>
<input name="fruit" slot="hidden" type="hidden">
</ld-select>
<div data-tether-id="36" style="top: 0; left: 0; position: absolute;"></div>
<ld-select-popper class="ld-select__popper--initialized ld-tether-element ld-tether-element-attached-left ld-tether-element-attached-top ld-tether-enabled ld-tether-target-attached-bottom ld-tether-target-attached-left" role="listbox" style="z-index: 2147483646; display: block; top: 0; left: 0; position: absolute; transform: translateX(NaNpx) translateY(NaNpx) translateZ(0); width: 0px;">
<mock:shadow-root>
<div class="ld-select-popper ld-select-popper--expanded" part="popper">
<div class="ld-select-popper__scroll-container" part="popper-scroll-container">
<slot></slot>
<div class="ld-select-popper__shadow" part="shadow" style="height: calc(100% + 0px);"></div>
</div>
</div>
</mock:shadow-root>
<div part="options-container">
<ld-option-internal mode="checkbox" value="apple">
<mock:shadow-root>
<div class="ld-option-internal" part="option focusable" role="option" tabindex="-1">
<div class="ld-option-internal__checkbox-wrapper" part="checkbox-wrapper" role="presentation">
<ld-checkbox class="ld-option-internal__checkbox" part="checkbox"></ld-checkbox>
</div>
<span class="ld-option-internal__label" part="label">
<slot></slot>
</span>
</div>
</mock:shadow-root>
Apple
</ld-option-internal>
<ld-option-internal mode="checkbox" value="pear">
<mock:shadow-root>
<div class="ld-option-internal" part="option focusable" role="option" tabindex="-1">
<div class="ld-option-internal__checkbox-wrapper" part="checkbox-wrapper" role="presentation">
<ld-checkbox class="ld-option-internal__checkbox" part="checkbox"></ld-checkbox>
</div>
<span class="ld-option-internal__label" part="label">
<slot></slot>
</span>
</div>
</mock:shadow-root>
Pear
</ld-option-internal>
<ld-option-internal mode="checkbox" value="banana">
<mock:shadow-root>
<div class="ld-option-internal" part="option focusable" role="option" tabindex="-1">
<div class="ld-option-internal__checkbox-wrapper" part="checkbox-wrapper" role="presentation">
<ld-checkbox class="ld-option-internal__checkbox" part="checkbox"></ld-checkbox>
</div>
<span class="ld-option-internal__label" part="label">
<slot></slot>
</span>
</div>
</mock:shadow-root>
Banana
</ld-option-internal>
</div>
<div class="ld-tether-element-marker">
<div class="ld-tether-marker-dot" style="top: 0px; left: 0px;"></div>
</div>
</ld-select-popper>
</form>
</body>
`;
exports[`ld-select removes hidden input field, after removing form attribute 1`] = `
<ld-select multiple="" name="fruit" placeholder="Pick a fruit">
<mock:shadow-root>
Expand Down Expand Up @@ -858,7 +965,7 @@ exports[`ld-select updates internal options in popper and hidden input fields 1`
<input name="fruit" slot="hidden" type="hidden" value="banana">
</ld-select>
</form>
<div data-tether-id="36" style="top: 0; left: 0; position: absolute;"></div>
<div data-tether-id="37" style="top: 0; left: 0; position: absolute;"></div>
<ld-select-popper class="ld-select__popper--initialized ld-tether-element ld-tether-element-attached-left ld-tether-element-attached-top ld-tether-enabled ld-tether-target-attached-bottom ld-tether-target-attached-left" role="listbox" style="z-index: 2147483646; display: block; top: 0; left: 0; position: absolute; transform: translateX(NaNpx) translateY(NaNpx) translateZ(0); width: 0px;">
<mock:shadow-root>
<div class="ld-select-popper ld-select-popper--expanded" part="popper">
Expand Down
23 changes: 23 additions & 0 deletions src/liquid/components/ld-select/test/ld-select.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1933,6 +1933,29 @@ describe('ld-select', () => {
}
})

it('places the popper inside a given element', async () => {
const page = await newSpecPage({
components,
html: `
<form>
<ld-select placeholder="Pick a fruit" name="fruit" multiple>
<ld-option value="apple">Apple</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="banana">Banana</ld-option>
</ld-select>
</form>`,
})

const form = page.body.querySelector('form')
const ldSelect = page.root as HTMLLdSelectElement

ldSelect.tetherOptions = { bodyElement: form }
await triggerPopperWithClick(page)
await page.waitForChanges()

expect(page.body).toMatchSnapshot()
})

it('updates internal options in popper and hidden input fields', async () => {
const page = await newSpecPage({
components,
Expand Down
17 changes: 10 additions & 7 deletions src/liquid/components/ld-tooltip/ld-tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ export class LdTooltip {
/** The rendered HTML tag for the tooltip trigger. */
@Prop() tag = 'button'

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

/** Event type that triggers the tooltip */
@Prop() triggerType: 'click' | 'hover' = 'hover'
Expand Down Expand Up @@ -125,10 +125,11 @@ export class LdTooltip {
this.tooltipRef.appendChild(node)
})

let customTetherOptions = {}
customTetherOptions = JSON.parse(this.tetherOptions)

this.popper = new Tether({
const customTetherOptions: Partial<Tether.ITetherOptions> =
typeof this.tetherOptions === 'string'
? JSON.parse(this.tetherOptions)
: this.tetherOptions
const tetherOptions: Tether.ITetherOptions = {
attachment,
classPrefix: 'ld-tether',
constraints: [
Expand All @@ -141,7 +142,9 @@ export class LdTooltip {
target: this.triggerRef,
targetAttachment,
...customTetherOptions,
})
}

this.popper = new Tether(tetherOptions)
// Fixes a tether positioning bug
this.popper.enable()
this.popper.enable()
Expand Down
Loading

0 comments on commit c2dd94c

Please sign in to comment.