Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@lion/button
Advanced tools
lion-button
provides a button component that is easily styleable and is accessible.
import { html } from 'lit-html';
import './lion-button.js';
import iconSvg from './docs/assets/icon.svg.js';
export default {
title: 'Buttons/Button',
};
export const main = () => html` <lion-button>Default</lion-button> `;
See our storybook for a live demo and API documentation
<form>
, <input>
and <button>
work together.npm i --save @lion/button
import { LionButton } from '@lion/button';
// or
import '@lion/button/lion-button.js';
<lion-button>Button Text</lion-button>
export const handler = () => html`
<lion-button @click="${ev => console.log('clicked/spaced/entered', ev)}">
Click | Space | Enter me and see log
</lion-button>
`;
export const iconButton = () => html` <lion-button>${iconSvg(html)} Bug</lion-button> `;
export const iconOnly = () =>
html` <lion-button aria-label="Bug"> ${iconSvg(html)} </lion-button> `;
export const disabled = () => html` <lion-button disabled>Disabled</lion-button> `;
Supports the following use cases:
export const withinForm = () => html`
<form
@submit=${ev => {
ev.preventDefault();
console.log('submit handler');
}}
>
<label for="firstNameId">First name</label>
<input id="firstNameId" name="firstName" />
<label for="lastNameId">Last name</label>
<input id="lastNameId" name="lastName" />
<lion-button @click=${() => console.log('click handler')}>Submit</lion-button>
</form>
`;
Important notes:
@click
on <lion-button>
and @submit
on <form>
are triggered by these use cases. We strongly encourage you to listen to the submit handler if your goal is to do something on form-submit.@submit
with event.preventDefault()
. Adding it on the <lion-button>
is not enough.There are multiple reasons why we used a Web Component as opposed to a CSS component.
<form>
submission, and even implicit form submission on-enter. A lot of delegation logic had to be created for this to work.We want to ensure that the event target returned to the user is <lion-button>
, not button
. Therefore, simply delegating the click to the native button immediately, is not desired. Instead, we catch the click event in the <lion-button>
, and ensure delegation inside of there.
By delegating the click()
to the native button, it will bubble back up to <lion-button>
which would cause duplicate actions. We have to simulate the full .click()
however, otherwise form submission is not triggered. So this bubbling cannot be prevented.
Therefore, on click, we flash a <button>
to the form as a direct child and fire the click on that button. We then immediately remove that button. This is a fully synchronous process; users or developers will not notice this, it should not cause problems.
Flashing the button in the way we do solves almost all issues except for one. One of the specs of W3C is that when you have a form with multiple inputs, pressing enter while inside one of the inputs only triggers a form submit if that form has a button of type submit.
To get this particular implicit form submission to work, having a native button in our <lion-button>
is a hard requirement.
Therefore, not only do we flash a native button on the form to delegate <lion-button>
trigger to <button>
and thereby trigger form submission, we also add a native button
inside the <lion-button>
whose type
property is synchronized with the type of the <lion-button>
.
FAQs
A button that is easily styleable and accessible in all contexts
The npm package @lion/button receives a total of 1,036 weekly downloads. As such, @lion/button popularity was classified as popular.
We found that @lion/button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.