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

Do not reflect variant, fixes #454

Browse Source 
Also a docs fix on callout (used it to make my testing easier)
This commit is contained in:
Lea Verou
2025-01-08 12:31:25 -05:00
parent 31cfdf5704
commit 3de76ef341
2 changed files with 35 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
docs/docs/components/callout.md
View File

@@ -19,43 +19,40 @@ icon: callout
Set the `variant` attribute to change the callout's variant.
```html {.example}
<wa-callout variant="brand">
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
<strong>This is super informative</strong><br />
You can tell by how pretty the callout is.
</wa-callout>
<br />
<wa-callout variant="success">
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
<strong>Your changes have been saved</strong><br />
You can safely exit the app now.
</wa-callout>
<br />
<wa-callout variant="neutral">
<wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
<strong>Your settings have been updated</strong><br />
Settings will take effect on next login.
</wa-callout>
<br />
<wa-callout variant="warning">
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
<strong>Your session has ended</strong><br />
Please login again to continue.
</wa-callout>
<br />
<wa-callout variant="danger">
<wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
<strong>Your account has been deleted</strong><br />
We're very sorry to see you go!
</wa-callout>
{% for variant, info in {
brand: {
title: 'This is super informative',
content: 'You can tell by how pretty the callout is.',
icon: 'circle-info'
},
success: {
title: 'Your changes have been saved',
content: 'You can safely exit the app now.',
icon: 'circle-check'
},
neutral: {
title: 'Your settings have been updated',
content: 'Settings will take effect on next login.',
icon: 'gear'
},
warning: {
title: 'Your session has ended',
content: 'Please login again to continue.',
icon: 'triangle-exclamation'
},
danger: {
title: 'Your account has been deleted',
content: 'We’re very sorry to see you go!',
icon: 'circle-exclamation'
}
} %}
<wa-callout variant="{{ variant }}">
<wa-icon slot="icon" name="{{ info.icon }}" variant="regular"></wa-icon>
<strong>{{ info.title }}</strong><br />
{{ info.content }}
</wa-callout>
{% if not loop.last %}<br />{% endif %}
{% endfor %}
```
### Appearance

2
src/components/button/button.ts
View File

@@ -69,7 +69,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@property() title = ''; // make reactive to pass through
/** The button's theme variant. */
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
@property() variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
/** The button's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';