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

Merge branch 'next' into patterns-exploration

Browse Source
This commit is contained in:
lindsaym-fa
2023-12-13 17:44:42 -05:00
parent 42922f06ed ccc6f1aa23
commit 5749c13ef0
12 changed files with 59 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_utilities/markdown.cjs
View File

@@ -25,8 +25,8 @@ markdown.use(markdownItReplaceIt);
['tip', 'warning', 'danger'].forEach(type => {
const variant = type === 'tip' ? 'brand' : type;
let icon = 'circle-info';
if (type === 'warning') icon = 'circle-exclamation';
if (type === 'danger') icon = 'triangle-exclamation';
if (type === 'warning') icon = 'triangle-exclamation';
if (type === 'danger') icon = 'circle-exclamation';
markdown.use(markdownItContainer, type, {
render: function (tokens, idx) {

2
docs/assets/styles/code-previews.css
View File

@@ -39,7 +39,7 @@
right: 0;
bottom: 0;
width: 1.75rem;
font-size: 20px;
font-size: var(--wa-font-size-xs);
color: var(--wa-color-text-quiet);
background-color: var(--wa-color-surface-default);
border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);

32
docs/pages/components/alert.md
View File

@@ -7,7 +7,7 @@ layout: component
```html:preview
<wa-alert open>
<wa-icon slot="icon" name="info-circle" variant="regular"></wa-icon>
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
This is a standard alert. You can customize its content and even the icon.
</wa-alert>
```
@@ -18,7 +18,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<WaAlert open>
<WaIcon slot="icon" name="info-circle" variant="regular" />
<WaIcon slot="icon" name="circle-info" variant="regular" />
This is a standard alert. You can customize its content and even the icon.
</WaAlert>
);
@@ -60,7 +60,7 @@ Set the `variant` attribute to change the alert's variant.
<br />
<wa-alert variant="warning" open>
<wa-icon slot="icon" name="exclamation-circle" variant="regular"></wa-icon>
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
<strong>Your session has ended</strong><br />
Please login again to continue.
</wa-alert>
@@ -68,7 +68,7 @@ Set the `variant` attribute to change the alert's variant.
<br />
<wa-alert variant="danger" open>
<wa-icon slot="icon" name="exclamation-triangle" variant="regular"></wa-icon>
<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-alert>
@@ -81,7 +81,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
const App = () => (
<>
<WaAlert variant="brand" open>
<WaIcon slot="icon" name="info-circle" variant="regular" />
<WaIcon slot="icon" name="circle-info" variant="regular" />
<strong>This is super informative</strong>
<br />
You can tell by how pretty the alert is.
@@ -90,7 +90,7 @@ const App = () => (
<br />
<WaAlert variant="success" open>
<WaIcon slot="icon" name="check2-circle" variant="regular" />
<WaIcon slot="icon" name="circle-check" variant="regular" />
<strong>Your changes have been saved</strong>
<br />
You can safely exit the app now.
@@ -108,7 +108,7 @@ const App = () => (
<br />
<WaAlert variant="warning" open>
<WaIcon slot="icon" name="exclamation-circle" variant="regular" />
<WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
<strong>Your session has ended</strong>
<br />
Please login again to continue.
@@ -117,7 +117,7 @@ const App = () => (
<br />
<WaAlert variant="danger" open>
<WaIcon slot="icon" name="exclamation-triangle" variant="regular" />
<WaIcon slot="icon" name="circle-exclamation" variant="regular" />
<strong>Your account has been deleted</strong>
<br />
We're very sorry to see you go!
@@ -132,7 +132,7 @@ Add the `closable` attribute to show a close button that will hide the alert.
```html:preview
<wa-alert variant="brand" open closable class="alert-closable">
<wa-icon slot="icon" name="info-circle" variant="regular"></wa-icon>
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
You can close this alert any time!
</wa-alert>
@@ -159,7 +159,7 @@ const App = () => {
return (
<WaAlert open={open} closable onWaAfterHide={handleHide}>
<WaIcon slot="icon" name="info-circle" variant="regular" />
<WaIcon slot="icon" name="circle-info" variant="regular" />
You can close this alert any time!
</WaAlert>
);
@@ -193,7 +193,7 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
<wa-button variant="brand">Show Alert</wa-button>
<wa-alert variant="brand" duration="3000" closable>
<wa-icon slot="icon" name="info-circle" variant="regular"></wa-icon>
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
This alert will automatically hide itself after three seconds, unless you interact with it.
</wa-alert>
</div>
@@ -236,7 +236,7 @@ const App = () => {
</WaButton>
<WaAlert variant="brand" duration="3000" open={open} closable onWaAfterHide={() => setOpen(false)}>
<WaIcon slot="icon" name="info-circle" variant="regular" />
<WaIcon slot="icon" name="circle-info" variant="regular" />
This alert will automatically hide itself after three seconds, unless you interact with it.
</WaAlert>
</div>
@@ -280,13 +280,13 @@ You should always use the `closable` attribute so users can dismiss the notifica
</wa-alert>
<wa-alert variant="warning" duration="3000" closable>
<wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
<strong>Your session has ended</strong><br />
Please login again to continue.
</wa-alert>
<wa-alert variant="danger" duration="3000" closable>
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
<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-alert>
@@ -365,14 +365,14 @@ const App = () => {
</WaAlert>
<WaAlert ref={warning} variant="warning" duration="3000" closable>
<WaIcon slot="icon" name="circle-exclamation" variant="regular" />
<WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
<strong>Your session has ended</strong>
<br />
Please login again to continue.
</WaAlert>
<WaAlert ref={danger} variant="danger" duration="3000" closable>
<WaIcon slot="icon" name="triangle-exclamation" variant="regular" />
<WaIcon slot="icon" name="circle-exclamation" variant="regular" />
<strong>Your account has been deleted</strong>
<br />
We're very sorry to see you go!

4
docs/pages/experimental/sandbox.md
View File

@@ -65,13 +65,13 @@ meta:
</wa-alert>
<br />
<wa-alert variant="warning" open>
<wa-icon slot="icon" name="circle-exclamation" variant="solid"></wa-icon>
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
<strong>Your session has ended</strong><br />
Please login again to continue.
</wa-alert>
<br />
<wa-alert variant="danger" open>
<wa-icon slot="icon" name="triangle-exclamation" variant="solid"></wa-icon>
<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-alert>

6
src/components/breadcrumb-item/breadcrumb-item.styles.ts
View File

@@ -63,12 +63,12 @@ export default css`
.breadcrumb-item--has-prefix .breadcrumb-item__prefix {
display: inline-flex;
margin-inline-end: var(--wa-space-xs);
margin-inline-end: var(--wa-space-s);
}
.breadcrumb-item--has-suffix .breadcrumb-item__suffix {
display: inline-flex;
margin-inline-start: var(--wa-space-xs);
margin-inline-start: var(--wa-space-s);
}
:host(:last-of-type) .breadcrumb-item__separator {
@@ -78,7 +78,7 @@ export default css`
.breadcrumb-item__separator {
display: inline-flex;
align-items: center;
margin: 0 var(--wa-space-xs);
margin: 0 var(--wa-space-s);
user-select: none;
-webkit-user-select: none;
}

4
src/components/button/button.styles.ts
View File

@@ -304,8 +304,8 @@ export default css`
}
.button--caret .button__caret::part(svg) {
width: 0.75em;
height: 0.75em;
width: 0.875em;
height: 0.875em;
}
/*

1
src/components/details/details.styles.ts
View File

@@ -60,6 +60,7 @@ export default css`
flex: 0 0 auto;
display: flex;
align-items: center;
color: var(--wa-color-text-quiet);
transition: var(--wa-transition-fast) rotate ease;
}

1
src/components/menu-item/menu-item.styles.ts
View File

@@ -100,6 +100,7 @@ export default css`
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875em;
width: var(--wa-space-xl);
visibility: hidden;
}

5
src/components/option/option.styles.ts
View File

@@ -20,7 +20,7 @@ export default css`
align-items: center;
font: inherit;
color: var(--wa-color-neutral-text-on-surface);
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-xs);
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs);
transition: var(--wa-transition-fast) fill;
cursor: pointer;
}
@@ -54,8 +54,9 @@ export default css`
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875em;
visibility: hidden;
padding-inline-end: var(--wa-space-2xs);
width: var(--wa-space-xl);
}
.option--selected .option__check {

2
src/components/select/select.styles.ts
View File

@@ -274,6 +274,8 @@ export default css`
flex: 0 0 auto;
display: flex;
align-items: center;
color: var(--wa-color-text-quiet);
font-size: 0.875em;
transition: rotate var(--wa-transition-normal) ease;
rotate: 0;
margin-inline-start: var(--wa-space-s);

2
src/components/tag/tag.component.ts
View File

@@ -80,7 +80,7 @@ export default class WaTag extends WebAwesomeElement {
exportparts="base:remove-button__base"
name="xmark"
library="system"
variant="regular"
variant="solid"
label=${this.localize.term('remove')}
class="tag__remove"
@click=${this.handleRemoveClick}

47
src/themes/applied.css
View File

@@ -185,8 +185,32 @@ abbr[title] {
cursor: help;
}
/* Code and similar */
code,
pre,
kbd,
samp,
var {
font-family: var(--wa-font-family-code);
font-size: 0.975em;
background-color: var(--wa-color-neutral-fill-subtle);
border-radius: var(--wa-corners-s);
padding-block: var(--wa-space-3xs);
padding-inline: var(--wa-space-2xs);
}
code {
background-color: color-mix(in oklab, var(--wa-color-neutral-spot), transparent 90%);
}
pre {
color: var(--wa-color-text-normal);
border-radius: var(--wa-corners-s);
padding: var(--wa-space-m);
white-space: pre;
}
kbd {
background: var(--wa-color-neutral-fill-subtle);
border: solid 1px var(--wa-color-neutral-border-subtle);
box-shadow:
inset 0 1px 0 1px rgb(255 255 255 / 0.2),
@@ -201,27 +225,6 @@ kbd wa-icon {
vertical-align: -2px;
}
/* Code and similar */
code,
pre,
kbd,
samp,
var {
font-family: var(--wa-font-family-code);
font-size: 0.975em;
background-color: color-mix(in oklab, var(--wa-color-neutral-spot), transparent 92%);
border-radius: var(--wa-corners-s);
padding-block: var(--wa-space-3xs);
padding-inline: var(--wa-space-2xs);
}
pre {
color: var(--wa-color-text-normal);
border-radius: var(--wa-corners-s);
padding: var(--wa-space-m);
white-space: pre;
}
/* Block quotes */
blockquote {
position: relative;