@lion/button
Advanced tools
Comparing version 0.7.12 to 0.7.13
# Change Log | ||
## 0.7.13 | ||
### Patch Changes | ||
- e42071d8: Types for overlays, tooltip and button | ||
- Updated dependencies [75107a4b] | ||
- @lion/core@0.12.0 | ||
## 0.7.12 | ||
@@ -4,0 +12,0 @@ |
{ | ||
"name": "@lion/button", | ||
"version": "0.7.12", | ||
"version": "0.7.13", | ||
"description": "A button that is easily styleable and accessible in all contexts", | ||
@@ -35,3 +35,3 @@ "license": "MIT", | ||
"dependencies": { | ||
"@lion/core": "0.11.0" | ||
"@lion/core": "0.12.0" | ||
}, | ||
@@ -38,0 +38,0 @@ "keywords": [ |
@@ -10,4 +10,7 @@ import { | ||
const isKeyboardClickEvent = e => e.keyCode === 32 /* space */ || e.keyCode === 13; /* enter */ | ||
const isSpaceKeyboardClickEvent = e => e.keyCode === 32 || e.key === 32; /* space */ | ||
const isKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => | ||
e.keyCode === 32 /* space */ || e.keyCode === 13; /* enter */ | ||
const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => | ||
// @ts-expect-error | ||
e.keyCode === 32 || e.key === 32; /* space */ | ||
@@ -135,4 +138,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) { | ||
/** @type {HTMLButtonElement} */ | ||
get _nativeButtonNode() { | ||
return Array.from(this.children).find(child => child.slot === '_button'); | ||
return /** @type {HTMLButtonElement} */ (Array.from(this.children).find( | ||
child => child.slot === '_button', | ||
)); | ||
} | ||
@@ -148,8 +154,7 @@ | ||
_button: () => { | ||
if (!this.constructor._button) { | ||
this.constructor._button = document.createElement('button'); | ||
this.constructor._button.setAttribute('tabindex', '-1'); | ||
this.constructor._button.setAttribute('aria-hidden', 'true'); | ||
} | ||
return this.constructor._button.cloneNode(); | ||
/** @type {HTMLButtonElement} */ | ||
const buttonEl = document.createElement('button'); | ||
buttonEl.setAttribute('tabindex', '-1'); | ||
buttonEl.setAttribute('aria-hidden', 'true'); | ||
return buttonEl; | ||
}, | ||
@@ -182,2 +187,5 @@ }; | ||
/** | ||
* @param {import('lit-element').PropertyValues } changedProperties | ||
*/ | ||
updated(changedProperties) { | ||
@@ -200,2 +208,3 @@ super.updated(changedProperties); | ||
* without side effects caused by the click bubbling back up to lion-button. | ||
* @param {Event} e | ||
*/ | ||
@@ -243,2 +252,5 @@ __clickDelegationHandler(e) { | ||
/** | ||
* @param {KeyboardEvent} e | ||
*/ | ||
__keydownHandler(e) { | ||
@@ -257,2 +269,5 @@ if (this.active || !isKeyboardClickEvent(e)) { | ||
this.active = true; | ||
/** | ||
* @param {KeyboardEvent} keyupEvent | ||
*/ | ||
const keyupHandler = keyupEvent => { | ||
@@ -267,2 +282,5 @@ if (isKeyboardClickEvent(keyupEvent)) { | ||
/** | ||
* @param {KeyboardEvent} e | ||
*/ | ||
__keyupHandler(e) { | ||
@@ -269,0 +287,0 @@ if (isKeyboardClickEvent(e)) { |
@@ -6,2 +6,9 @@ import { browserDetection } from '@lion/core'; | ||
/** | ||
* @typedef {import('@lion/button/src/LionButton').LionButton} LionButton | ||
*/ | ||
/** | ||
* @param {HTMLElement} el | ||
*/ | ||
function getClickArea(el) { | ||
@@ -16,3 +23,3 @@ if (el.shadowRoot) { | ||
it('behaves like native `button` in terms of a11y', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
expect(el.getAttribute('role')).to.equal('button'); | ||
@@ -23,3 +30,3 @@ expect(el.getAttribute('tabindex')).to.equal('0'); | ||
it('has .type="submit" and type="submit" by default', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
expect(el.type).to.equal('submit'); | ||
@@ -32,3 +39,5 @@ expect(el.getAttribute('type')).to.be.equal('submit'); | ||
it('sync type down to the native button', async () => { | ||
const el = await fixture(`<lion-button type="button">foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture( | ||
`<lion-button type="button">foo</lion-button>`, | ||
)); | ||
expect(el.type).to.equal('button'); | ||
@@ -41,3 +50,3 @@ expect(el.getAttribute('type')).to.be.equal('button'); | ||
it('hides the native button in the UI', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
expect(el._nativeButtonNode.getAttribute('tabindex')).to.equal('-1'); | ||
@@ -48,3 +57,3 @@ expect(window.getComputedStyle(el._nativeButtonNode).clip).to.equal('rect(0px, 0px, 0px, 0px)'); | ||
it('is hidden when attribute hidden is true', async () => { | ||
const el = await fixture(`<lion-button hidden>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button hidden>foo</lion-button>`)); | ||
expect(el).not.to.be.displayed; | ||
@@ -54,3 +63,3 @@ }); | ||
it('can be disabled imperatively', async () => { | ||
const el = await fixture(`<lion-button disabled>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button disabled>foo</lion-button>`)); | ||
expect(el.getAttribute('tabindex')).to.equal('-1'); | ||
@@ -74,3 +83,3 @@ expect(el.getAttribute('aria-disabled')).to.equal('true'); | ||
it('updates "active" attribute on host when mousedown/mouseup on button', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
el.dispatchEvent(new Event('mousedown')); | ||
@@ -89,3 +98,3 @@ | ||
it('updates "active" attribute on host when mousedown on button and mouseup anywhere else', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
@@ -104,3 +113,3 @@ el.dispatchEvent(new Event('mousedown')); | ||
it('updates "active" attribute on host when space keydown/keyup on button', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
@@ -119,3 +128,3 @@ el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 32 })); | ||
it('updates "active" attribute on host when space keydown on button and space keyup anywhere else', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
@@ -134,3 +143,3 @@ el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 32 })); | ||
it('updates "active" attribute on host when enter keydown/keyup on button', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
@@ -149,3 +158,3 @@ el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 13 })); | ||
it('updates "active" attribute on host when enter keydown on button and space keyup anywhere else', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
@@ -166,3 +175,3 @@ el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 13 })); | ||
it('has a role="button" by default', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
expect(el.getAttribute('role')).to.equal('button'); | ||
@@ -175,3 +184,5 @@ el.role = 'foo'; | ||
it('does not override user provided role', async () => { | ||
const el = await fixture(`<lion-button role="foo">foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture( | ||
`<lion-button role="foo">foo</lion-button>`, | ||
)); | ||
expect(el.getAttribute('role')).to.equal('foo'); | ||
@@ -181,3 +192,3 @@ }); | ||
it('has a tabindex="0" by default', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
expect(el.getAttribute('tabindex')).to.equal('0'); | ||
@@ -187,3 +198,5 @@ }); | ||
it('has a tabindex="-1" when disabled', async () => { | ||
const el = await fixture(`<lion-button disabled>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture( | ||
`<lion-button disabled>foo</lion-button>`, | ||
)); | ||
expect(el.getAttribute('tabindex')).to.equal('-1'); | ||
@@ -199,3 +212,5 @@ el.disabled = false; | ||
it('does not override user provided tabindex', async () => { | ||
const el = await fixture(`<lion-button tabindex="5">foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture( | ||
`<lion-button tabindex="5">foo</lion-button>`, | ||
)); | ||
expect(el.getAttribute('tabindex')).to.equal('5'); | ||
@@ -205,3 +220,5 @@ }); | ||
it('disabled does not override user provided tabindex', async () => { | ||
const el = await fixture(`<lion-button tabindex="5" disabled>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture( | ||
`<lion-button tabindex="5" disabled>foo</lion-button>`, | ||
)); | ||
expect(el.getAttribute('tabindex')).to.equal('-1'); | ||
@@ -215,3 +232,3 @@ el.disabled = false; | ||
const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true); | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
expect(el.hasAttribute('aria-labelledby')).to.be.true; | ||
@@ -227,3 +244,3 @@ const wrapperId = el.getAttribute('aria-labelledby'); | ||
it('has a native button node with aria-hidden set to true', async () => { | ||
const el = await fixture('<lion-button></lion-button>'); | ||
const el = /** @type {LionButton} */ (await fixture('<lion-button></lion-button>')); | ||
@@ -234,3 +251,3 @@ expect(el._nativeButtonNode.getAttribute('aria-hidden')).to.equal('true'); | ||
it('is accessible', async () => { | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`)); | ||
await expect(el).to.be.accessible(); | ||
@@ -240,3 +257,5 @@ }); | ||
it('is accessible when disabled', async () => { | ||
const el = await fixture(`<lion-button disabled>foo</lion-button>`); | ||
const el = /** @type {LionButton} */ (await fixture( | ||
`<lion-button disabled>foo</lion-button>`, | ||
)); | ||
await expect(el).to.be.accessible({ ignoredRules: ['color-contrast'] }); | ||
@@ -249,3 +268,3 @@ }); | ||
it('behaves like native `button` when clicked', async () => { | ||
const formSubmitSpy = sinon.spy(e => e.preventDefault()); | ||
const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault())); | ||
const form = await fixture(html` | ||
@@ -264,3 +283,3 @@ <form @submit="${formSubmitSpy}"> | ||
it('behaves like native `button` when interacted with keyboard space', async () => { | ||
const formSubmitSpy = sinon.spy(e => e.preventDefault()); | ||
const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault())); | ||
const form = await fixture(html` | ||
@@ -281,3 +300,3 @@ <form @submit="${formSubmitSpy}"> | ||
it('behaves like native `button` when interacted with keyboard enter', async () => { | ||
const formSubmitSpy = sinon.spy(e => e.preventDefault()); | ||
const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault())); | ||
const form = await fixture(html` | ||
@@ -323,3 +342,3 @@ <form @submit="${formSubmitSpy}"> | ||
it.skip('works with implicit form submission on-enter inside an input', async () => { | ||
const formSubmitSpy = sinon.spy(e => e.preventDefault()); | ||
const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault())); | ||
const form = await fixture(html` | ||
@@ -345,3 +364,3 @@ <form @submit="${formSubmitSpy}"> | ||
it('behaves like native `button` when clicked', async () => { | ||
const formButtonClickedSpy = sinon.spy(); | ||
const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy()); | ||
const form = await fixture(html` | ||
@@ -360,3 +379,3 @@ <form @submit=${ev => ev.preventDefault()}> | ||
it('behaves like native `button` when interacted with keyboard space', async () => { | ||
const formButtonClickedSpy = sinon.spy(); | ||
const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy()); | ||
const form = await fixture(html` | ||
@@ -378,3 +397,3 @@ <form @submit=${ev => ev.preventDefault()}> | ||
it('behaves like native `button` when interacted with keyboard enter', async () => { | ||
const formButtonClickedSpy = sinon.spy(); | ||
const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy()); | ||
const form = await fixture(html` | ||
@@ -397,3 +416,3 @@ <form @submit=${ev => ev.preventDefault()}> | ||
it.skip('works with implicit form submission on-enter inside an input', async () => { | ||
const formButtonClickedSpy = sinon.spy(); | ||
const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy()); | ||
const form = await fixture(html` | ||
@@ -420,4 +439,6 @@ <form @submit=${ev => ev.preventDefault()}> | ||
it('is fired once', async () => { | ||
const clickSpy = sinon.spy(); | ||
const el = await fixture(html`<lion-button @click="${clickSpy}">foo</lion-button>`); | ||
const clickSpy = /** @type {EventListener} */ (sinon.spy()); | ||
const el = /** @type {LionButton} */ (await fixture( | ||
html`<lion-button @click="${clickSpy}">foo</lion-button>`, | ||
)); | ||
@@ -449,4 +470,6 @@ getClickArea(el).click(); | ||
before(async () => { | ||
const nativeButtonEl = await fixture('<button>foo</button>'); | ||
const lionButtonEl = await fixture('<lion-button>foo</lion-button>'); | ||
const nativeButtonEl = /** @type {LionButton} */ (await fixture('<button>foo</button>')); | ||
const lionButtonEl = /** @type {LionButton} */ (await fixture( | ||
'<lion-button>foo</lion-button>', | ||
)); | ||
nativeButtonEvent = await prepareClickEvent(nativeButtonEl); | ||
@@ -472,3 +495,3 @@ lionButtonEvent = await prepareClickEvent(lionButtonEl); | ||
it('has host in the target property', async () => { | ||
const el = await fixture('<lion-button>foo</lion-button>'); | ||
const el = /** @type {LionButton} */ (await fixture('<lion-button>foo</lion-button>')); | ||
const event = await prepareClickEvent(el); | ||
@@ -475,0 +498,0 @@ expect(event.target).to.equal(el); |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
64861
10
771
+ Added@lion/core@0.12.0(transitive)
- Removed@lion/core@0.11.0(transitive)
Updated@lion/core@0.12.0