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

[Tag] Add appearance, closes #435

Browse Source
This commit is contained in:
Lea Verou
2025-01-07 10:37:21 -05:00
parent eca15dc7fc
commit 4b4f2247c5
3 changed files with 51 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>

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';