-
Notifications
You must be signed in to change notification settings - Fork 83
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor!: re-apply button changes (#2411)
- Loading branch information
1 parent
709314f
commit bad4586
Showing
15 changed files
with
316 additions
and
344 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,5 @@ | ||
| # <vaadin-button> | ||
| # @vaadin/button | ||
|
|
||
| [Live Demo ↗](https://vaadin.com/components/vaadin-button/html-examples) | ||
| | | ||
| [API documentation ↗](https://vaadin.com/components/vaadin-button/html-api) | ||
| > ⚠️ Work in progress, please do not use this component yet. | ||
| [<vaadin-button>](https://vaadin.com/components/vaadin-button) is a Web Component providing an accessible and customizable button, part of the [Vaadin components](https://vaadin.com/components). | ||
|
|
||
| [](https://www.npmjs.com/package/@vaadin/vaadin-button) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-button) | ||
| [](https://discord.gg/PHmkCKC) | ||
|
|
||
| ```html | ||
| <vaadin-button theme="primary">Primary</vaadin-button> | ||
| <vaadin-button theme="secondary">Secondary</vaadin-button> | ||
| <vaadin-button theme="tertiary">Tertiary</vaadin-button> | ||
| ``` | ||
|
|
||
| [<img src="https://raw.githubusercontent.com/vaadin/vaadin-button/master/screenshot.png" alt="Screenshot of vaadin-button, using the default Lumo theme">](https://vaadin.com/components/vaadin-button) | ||
|
|
||
| ## Installation | ||
|
|
||
| Install `vaadin-button`: | ||
|
|
||
| ```sh | ||
| npm i @vaadin/vaadin-button --save | ||
| ``` | ||
|
|
||
| Once installed, import it in your application: | ||
|
|
||
| ```js | ||
| import '@vaadin/vaadin-button/vaadin-button.js'; | ||
| ``` | ||
|
|
||
| ## Getting started | ||
|
|
||
| Vaadin components use the Lumo theme by default. | ||
|
|
||
| To use the Material theme, import the correspondent file from the `theme/material` folder. | ||
|
|
||
| ## Entry points | ||
|
|
||
| - The component with the Lumo theme: | ||
|
|
||
| `theme/lumo/vaadin-button.js` | ||
|
|
||
| - The component with the Material theme: | ||
|
|
||
| `theme/material/vaadin-button.js` | ||
|
|
||
| - Alias for `theme/lumo/vaadin-button.js`: | ||
|
|
||
| `vaadin-button.js` | ||
|
|
||
| ## Contributing | ||
|
|
||
| Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components. | ||
|
|
||
| ## License | ||
|
|
||
| Apache License 2.0 | ||
|
|
||
| Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics. | ||
| The new version of `vaadin-button` component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,18 @@ | ||
| import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js'; | ||
|
|
||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
|
|
||
| import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js'; | ||
|
|
||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
|
|
||
| /** | ||
| * `<vaadin-button>` is a Web Component providing an accessible and customizable button. | ||
| * | ||
| * ```html | ||
| * <vaadin-button> | ||
| * </vaadin-button> | ||
| * ``` | ||
| * | ||
| * ```js | ||
| * document.querySelector('vaadin-button').addEventListener('click', () => alert('Hello World!')); | ||
| * ``` | ||
| * | ||
| * ### Styling | ||
| * | ||
| * The following shadow DOM parts are exposed for styling: | ||
| * | ||
| * Part name | Description | ||
| * ----------------|---------------- | ||
| * `label` | The label (text) inside the button | ||
| * `prefix` | A slot for e.g. an icon before the label | ||
| * `suffix` | A slot for e.g. an icon after the label | ||
| * | ||
| * | ||
| * The following attributes are exposed for styling: | ||
| * | ||
| * Attribute | Description | ||
| * --------- | ----------- | ||
| * `active` | Set when the button is pressed down, either with mouse, touch or the keyboard. | ||
| * `disabled` | Set when the button is disabled. | ||
| * `focus-ring` | Set when the button is focused using the keyboard. | ||
| * `focused` | Set when the button is focused. | ||
| * | ||
| * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation. | ||
| * @license | ||
| * Copyright (c) 2021 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
| */ | ||
| declare class ButtonElement extends ElementMixin(ControlStateMixin(ThemableMixin(GestureEventListeners(HTMLElement)))) { | ||
| readonly focusElement: Element | null; | ||
| } | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| import { ActiveMixin } from '@vaadin/field-base/src/active-mixin.js'; | ||
| import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js'; | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'vaadin-button': ButtonElement; | ||
| } | ||
| declare class Button extends ControlStateMixin(ActiveMixin(ElementMixin(ThemableMixin(HTMLElement)))) { | ||
| /** | ||
| * A getter that returns the native button as a focusable element for ControlStateMixin. | ||
| */ | ||
| readonly focusElement: HTMLButtonElement | null; | ||
| } | ||
|
|
||
| export { ButtonElement }; | ||
| export { Button }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.