js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into icon-properties

Browse Source
This commit is contained in:
Lea Verou
2025-01-07 12:10:34 -05:00
committed by GitHub
parent cd5c8046a0 5e3fed605e
commit 5fdfc2f1fa
4 changed files with 52 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/docs/components/tag.md
View File

@@ -15,9 +15,50 @@ icon: tag
## Examples
### Appearance
Use the `size` attribute to change a tag's visual appearance.
The default appearance is `outlined filled`.
```html {.example}
<div class="wa-stack">
<p>
<wa-tag variant="brand" appearance="outlined accent">Outlined accent</wa-tag>
<wa-tag variant="brand" appearance="accent">Accent</wa-tag>
<wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
<wa-tag variant="brand" appearance="filled">Filled</wa-tag>
<wa-tag variant="brand" appearance="outlined filled">Outlined Filled</wa-tag>
</p>
<p>
<wa-tag variant="success" appearance="outlined accent">Outlined accent</wa-tag>
<wa-tag variant="success" appearance="accent">Accent</wa-tag>
<wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
<wa-tag variant="success" appearance="filled">Filled</wa-tag>
<wa-tag variant="success" appearance="outlined filled">Outlined Filled</wa-tag>
<p>
<wa-tag variant="neutral" appearance="outlined accent">Outlined accent</wa-tag>
<wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
<wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
<wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
<wa-tag variant="neutral" appearance="outlined filled">Outlined Filled</wa-tag>
<p>
<wa-tag variant="warning" appearance="outlined accent">Outlined accent</wa-tag>
<wa-tag variant="warning" appearance="accent">Accent</wa-tag>
<wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
<wa-tag variant="warning" appearance="filled">Filled</wa-tag>
<wa-tag variant="warning" appearance="outlined filled">Outlined Filled</wa-tag>
<p>
<wa-tag variant="danger" appearance="outlined accent">Outlined accent</wa-tag>
<wa-tag variant="danger" appearance="accent">Accent</wa-tag>
<wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
<wa-tag variant="danger" appearance="filled">Filled</wa-tag>
<wa-tag variant="danger" appearance="outlined filled">Outlined Filled</wa-tag>
</div>
```
### Sizes
Use the `size` attribute to change a tab's size.
Use the `size` attribute to change a tag's size.
```html {.example}
<wa-tag size="small">Small</wa-tag>

1
docs/docs/resources/changelog.md
View File

@@ -15,6 +15,7 @@ During the alpha period, things might break! We take breaking changes very serio
## Next
- Simplified the internal structure and CSS properties of `<wa-card>`, removed `base` part.
- Added `appearance` to `<wa-callout>` and `<wa-tag>`
- Fixed a bug in `<wa-switch>` where it would not properly change its "checked" state when its property changed.
- Fixed a bug in the `wa-split` CSS utility that caused it to behave incorrectly
- Improved performance of `<wa-select>` when using a large number of options

6
src/components/tag/tag.css
View File

@@ -6,11 +6,11 @@
display: inline-flex;
border-radius: var(--wa-border-radius-m);
align-items: center;
background-color: var(--wa-color-fill-quiet);
border-color: var(--wa-color-border-normal);
background-color: var(--background-color, var(--wa-color-fill-quiet));
border-color: var(--border-color, transparent);
border-style: var(--wa-border-style);
border-width: var(--wa-border-width-s);
color: var(--wa-color-on-normal);
color: var(--text-color, var(--wa-color-on-normal));
line-height: 1;
white-space: nowrap;
user-select: none;

7
src/components/tag/tag.ts
View File

@@ -2,6 +2,7 @@ import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { WaRemoveEvent } from '../../events/remove.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
import variantStyles from '../../styles/utilities/variants.css';
import { LocalizeController } from '../../utilities/localize.js';
@@ -27,13 +28,17 @@ import styles from './tag.css';
*/
@customElement('wa-tag')
export default class WaTag extends WebAwesomeElement {
static shadowStyle = [sizeStyles, variantStyles, styles];
static shadowStyle = [sizeStyles, variantStyles, appearanceStyles, styles];
private readonly localize = new LocalizeController(this);
/** The tag's theme variant. */
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
/** The tag's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'outlined accent' | 'filled' | 'outlined' | 'outlined filled' =
'outlined filled';
/** The tag's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';