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

text→plain (for appearance and utils) rel #330

Browse Source
This commit is contained in:
Lea Verou
2024-12-18 12:51:13 -05:00
parent d6fb269381
commit f5ed55513b
15 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/base-wide.njk
View File

@@ -43,7 +43,7 @@
<wa-page>
<header slot="header">
{# Nav toggle #}
<wa-button variant="text" data-toggle-nav>
<wa-button appearance="plain" data-toggle-nav>
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
</wa-button>

2
docs/_includes/base.njk
View File

@@ -89,7 +89,7 @@
{# Logo #}
<div id="docs-branding">
{# Nav toggle #}
<wa-button appearance="text" size="small" data-toggle-nav>
<wa-button appearance="plain" size="small" data-toggle-nav>
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
</wa-button>

10
docs/docs/components/button.md
View File

@@ -32,31 +32,31 @@ Use the `appearance` attribute to change the button's visual appearance.
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
<wa-button appearance="tinted" variant="neutral">Tinted</wa-button>
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
<wa-button appearance="text" variant="neutral">Text</wa-button>
<wa-button appearance="plain" variant="neutral">Text</wa-button>
</div>
<div style="margin-block-end: 1rem;">
<wa-button appearance="filled" variant="brand">Filled</wa-button>
<wa-button appearance="tinted" variant="brand">Tinted</wa-button>
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
<wa-button appearance="text" variant="brand">Text</wa-button>
<wa-button appearance="plain" variant="brand">Text</wa-button>
</div>
<div style="margin-block-end: 1rem;">
<wa-button appearance="filled" variant="success">Filled</wa-button>
<wa-button appearance="tinted" variant="success">Tinted</wa-button>
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
<wa-button appearance="text" variant="success">Text</wa-button>
<wa-button appearance="plain" variant="success">Text</wa-button>
</div>
<div style="margin-block-end: 1rem;">
<wa-button appearance="filled" variant="warning">Filled</wa-button>
<wa-button appearance="tinted" variant="warning">Tinted</wa-button>
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
<wa-button appearance="text" variant="warning">Text</wa-button>
<wa-button appearance="plain" variant="warning">Text</wa-button>
</div>
<div>
<wa-button appearance="filled" variant="danger">Filled</wa-button>
<wa-button appearance="tinted" variant="danger">Tinted</wa-button>
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
<wa-button appearance="text" variant="danger">Text</wa-button>
<wa-button appearance="plain" variant="danger">Text</wa-button>
</div>
```

10
docs/docs/essentials/button.md
View File

@@ -35,31 +35,31 @@ Use the appearance utility classes to change the button's visual appearance:
<button class="wa-filled wa-neutral">Filled</button>
<button class="wa-tinted wa-neutral">Tinted</button>
<button class="wa-outlined wa-neutral">Outlined</button>
<button class="wa-text wa-neutral">Text</button>
<button class="wa-plain wa-neutral">Text</button>
</div>
<div style="margin-block-end: 1rem;">
<button class="wa-filled wa-brand">Filled</button>
<button class="wa-tinted wa-brand">Tinted</button>
<button class="wa-outlined wa-brand">Outlined</button>
<button class="wa-text wa-brand">Text</button>
<button class="wa-plain wa-brand">Text</button>
</div>
<div style="margin-block-end: 1rem;">
<button class="wa-filled wa-success">Filled</button>
<button class="wa-tinted wa-success">Tinted</button>
<button class="wa-outlined wa-success">Outlined</button>
<button class="wa-text wa-success">Text</button>
<button class="wa-plain wa-success">Text</button>
</div>
<div style="margin-block-end: 1rem;">
<button class="wa-filled wa-warning">Filled</button>
<button class="wa-tinted wa-warning">Tinted</button>
<button class="wa-outlined wa-warning">Outlined</button>
<button class="wa-text wa-warning">Text</button>
<button class="wa-plain wa-warning">Text</button>
</div>
<div>
<button class="wa-filled wa-danger">Filled</button>
<button class="wa-tinted wa-danger">Tinted</button>
<button class="wa-outlined wa-danger">Outlined</button>
<button class="wa-text wa-danger">Text</button>
<button class="wa-plain wa-danger">Text</button>
</div>
```

2
docs/docs/essentials/dialog.md
View File

@@ -12,7 +12,7 @@ component: dialog
<dialog id="dialog-overview">
<header>
<h2>Dialog</h2>
<button data-dialog="close" class="wa-text">✖️</button>
<button data-dialog="close" class="wa-plain">✖️</button>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<footer>

2
docs/docs/experimental/sandbox.md
View File

@@ -106,7 +106,7 @@ layout: page
<wa-button variant="warning" appearance="outlined">Warning</wa-button>
<wa-button variant="danger" appearance="outlined">Danger</wa-button>
<br /><br />
<wa-button appearance="text">Text</wa-button>
<wa-button appearance="plain">Text</wa-button>
<br /><br />
<wa-radio-group label="Radio button group" name="a" value="1">
<wa-radio-button value="1">Option 1</wa-radio-button>

2
docs/docs/experimental/themer.md
View File

@@ -534,7 +534,7 @@ hasOutline: false
<wa-radio-button value="meteor"><wa-icon name="meteor"></wa-icon></wa-radio-button>
<wa-radio-button value="cat-space"><wa-icon name="cat-space"></wa-icon></wa-radio-button>
<wa-radio-button value="puzzle-piece"><wa-icon name="puzzle-piece"></wa-icon></wa-radio-button>
<wa-button value="[choose]" appearance="text" id="icon-chooser-trigger" class="logo-chooser">
<wa-button value="[choose]" appearance="plain" id="icon-chooser-trigger" class="logo-chooser">
<wa-tooltip for="icon-chooser-trigger" distance="-3" hoist>Browse Icons</wa-tooltip>
<wa-icon name="ellipsis" library="fa-classic-regular"></wa-icon>
<wa-visually-hidden>Browse icons</wa-visually-hidden>

12
docs/docs/patterns/ecommerce.md
View File

@@ -143,7 +143,7 @@ TODO Page Description
<div style="font-size: small;">Off-white Jordan One</div>
<div style="display:flex; justify-content: space-between; align-items: center;">
<span>Qty: 1</span>
<wa-button appearance="text" size="small">Remove</wa-button>
<wa-button appearance="plain" size="small">Remove</wa-button>
</div>
</div>
</section>
@@ -157,7 +157,7 @@ TODO Page Description
<div style="font-size: small;">50/50 Cotton Poly Blend</div>
<div style="display:flex; justify-content: space-between; align-items: center;">
<span>Qty: 1</span>
<wa-button appearance="text" size="small">Remove</wa-button>
<wa-button appearance="plain" size="small">Remove</wa-button>
</div>
</div>
</section>
@@ -171,7 +171,7 @@ TODO Page Description
<div style="font-size: small;">100% Cotton</div>
<div style="display:flex; justify-content: space-between; align-items: center;">
<span>Qty: 1</span>
<wa-button appearance="text" size="small">Remove</wa-button>
<wa-button appearance="plain" size="small">Remove</wa-button>
</div>
</div>
</section>
@@ -404,7 +404,7 @@ TODO Page Description
<div style="display: flex;justify-content: space-between;align-items: baseline;">
<span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
<wa-button appearance="text" size="small">Remove</wa-button>
<wa-button appearance="plain" size="small">Remove</wa-button>
</div>
</div>
@@ -421,7 +421,7 @@ TODO Page Description
<div style="display: flex;justify-content: space-between;align-items: baseline;">
<span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
<wa-button appearance="text" size="small">Remove</wa-button>
<wa-button appearance="plain" size="small">Remove</wa-button>
</div>
</div>
@@ -438,7 +438,7 @@ TODO Page Description
<div style="display: flex;justify-content: space-between;align-items: baseline;">
<span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
<wa-button appearance="text" size="small">Remove</wa-button>
<wa-button appearance="plain" size="small">Remove</wa-button>
</div>
</div>

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

@@ -73,7 +73,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
/** The button's visual appearance. */
@property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outlined' | 'text' = 'filled';
@property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outlined' | 'plain' = 'filled';
/** The button's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

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

@@ -276,7 +276,7 @@ export default class WaPage extends WebAwesomeElement {
</div>
<div class="header" part="header">
<slot name="navigation-toggle">
<wa-button part="navigation-toggle" size="small" appearance="text" variant="neutral">
<wa-button part="navigation-toggle" size="small" appearance="plain" variant="neutral">
<slot name="navigation-toggle-icon">
<wa-icon name="bars" part="navigation-toggle-icon" label="Toggle navigation drawer"></wa-icon>
</slot>

2
src/styles/depth/2_chunky.css
View File

@@ -45,7 +45,7 @@ wa-button {
--wa-transition-normal: 0ms;
--wa-transition-fast: 0ms;
&:not([appearance='text']) {
&:not([appearance='plain']) {
--box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--box-shadow-color);
margin-bottom: var(--wa-shadow-offset-y-s);

2
src/styles/depth/3_punchy.css
View File

@@ -40,7 +40,7 @@
}
/* #region Buttons */
wa-button:not([appearance='text']) {
wa-button:not([appearance='plain']) {
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;

5
src/styles/depth/4_glossy.css
View File

@@ -97,10 +97,11 @@
/* #endregion */
/* #region Buttons */
wa-button:not([appearance='text']) {
wa-button:not([appearance='plain']) {
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */, inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
margin-bottom: var(--wa-shadow-offset-y-xs);

2
src/styles/themes/fa.css
View File

@@ -504,7 +504,7 @@
}
}
wa-button:not([appearance='text']) {
wa-button:not([appearance='plain']) {
--border-color: var(--text-color);
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);

4
src/styles/utilities/appearance.css
View File

@@ -37,8 +37,8 @@
}
}
.wa-text,
:host([appearance~='text']) {
.wa-plain,
:host([appearance~='plain']) {
--background-color: transparent;
--text-color: var(--wa-color-on-quiet);