mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 07:29:14 +00:00
Compare commits
2 Commits
wa-icon-fi
...
next
| Author | SHA1 | Date | |
|---|---|---|---|
|
6e0c83b278 | ||
|
|
96f4d08430 |
@@ -396,20 +396,6 @@ If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have acc
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wa-flank" style="--flank-size: 10ch;">
|
||||
<a href="https://fontawesome.com/icons/packs/utility" target="_blank">Utility</a>
|
||||
<div class="wa-cluster" style="font-size: 1.5em;">
|
||||
<wa-icon family="utility" variant="semibold" name="house"></wa-icon>
|
||||
<wa-icon
|
||||
family="utility-duo"
|
||||
variant="semibold"
|
||||
name="house"
|
||||
style="--secondary-color: skyblue; --secondary-opacity: 0.8;"
|
||||
></wa-icon>
|
||||
<wa-icon family="utility-fill" variant="semibold" name="house"></wa-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wa-flank" style="--flank-size: 10ch;">
|
||||
<a href="https://fontawesome.com/icons/packs/whiteboard" target="_blank">Whiteboard</a>
|
||||
<div class="wa-cluster" style="font-size: 32px;">
|
||||
|
||||
@@ -24,7 +24,6 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
- [Docs]: component APIs like slots, state, methods, etc, are now alphabetized [pr:1895]
|
||||
- [Docs]: component APIs now properly check their inheritance chain [pr:1895]
|
||||
- [Docs]: Included framework specific documentation for Svelte, Vue, and Angular. [pr:1895]
|
||||
- Fixed a bug in `<wa-icon>` to support Font Awesome Pro+ icon families that include qualifiers (e.g., `family="jelly-duo"` now works correctly instead of requiring `family="jelly" variant="duo-regular"`) and updated Font Awesome to 7.1.0
|
||||
- Fixed a bug in `<wa-dropdown>` where submenu detection would not work in shadow dom. [pr:]
|
||||
- Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
|
||||
- Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
|
||||
@@ -50,14 +49,15 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
- Fixed a bug in `<wa-icon>` that caused some icon libraries to render with the incorrect SVG fill [issue:1733]
|
||||
- Fixed a bug in `<wa-tree-item>` that caused the spinner to not show when lazy loading [issue:1678]
|
||||
- Fixed a bug in `<wa-dropdown>` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483]
|
||||
- Fixed a bug in `<wa-tab-group>` that ensures the active indicator always shows [issue:1206]
|
||||
- Fixed a bug in `<wa-dropdown-item>` that prevented the icon dependency from being imported [issue:1825]
|
||||
- Fixed a bug in `<wa-select>` that prevented clicks on the tag's remove button from removing options in multiple mode
|
||||
- Fixed a bug in `<wa-select>` that caused tags to appear in alphabetical order instead of selection order when using `multiple`
|
||||
- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
|
||||
- Improved `<wa-slider>` to not throw an error when string values are passed to the `min`, `max`, and `step` properties [issue:1823]
|
||||
- Fixed a bug in Web Awesome form controls that caused `<wa-input form="foo">` to set the form property to equal `"foo"` instead of returning an `HTMLFormElement` breaking platform expectations. [pr:1815]
|
||||
- Fixed a bug in `<wa-button>` causing it to not copy over attributes for form submissions. [pr:1815]
|
||||
- Fixed a bug where the build script was not building `/dist/(utilities|events).js` [pr:1816]
|
||||
- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
|
||||
- Improved `<wa-slider>` to not throw an error when string values are passed to the `min`, `max`, and `step` properties [issue:1823]
|
||||
- Improved performance of all components by fixing how CSS is imported and reused [issue:1812]
|
||||
- Modified the default `transition` styles of `<wa-dropdown-item>` to use design tokens [pr:1693]
|
||||
|
||||
@@ -543,4 +543,4 @@ Many of these changes and improvements were the direct result of feedback from u
|
||||
|
||||
</details>
|
||||
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
|
||||
@@ -52,7 +52,8 @@ export async function createEleventy(options = {}) {
|
||||
eleventy.logger.overrideLogger(new CustomLogger());
|
||||
|
||||
if (isIncremental) {
|
||||
await eleventy.watch();
|
||||
// For some reason, removing the await here fixes incremental loading?
|
||||
eleventy.watch();
|
||||
|
||||
process.on('SIGINT', async () => {
|
||||
await eleventy.stopWatch();
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { getKitCode } from '../../utilities/base-path.js';
|
||||
import type { IconLibrary } from './library.js';
|
||||
|
||||
const FA_VERSION = '7.1.0';
|
||||
const FA_VERSION = '7.0.1';
|
||||
|
||||
function getIconUrl(name: string, family: string, variant: string) {
|
||||
const kitCode = getKitCode();
|
||||
@@ -9,16 +9,10 @@ function getIconUrl(name: string, family: string, variant: string) {
|
||||
let folder = 'solid';
|
||||
|
||||
// Notdog (Pro+)
|
||||
// Correct usage: family="notdog" or family="notdog-duo", variant="solid"
|
||||
if (family === 'notdog') {
|
||||
// NOTE: variant="duo-solid" is deprecated, use family="notdog-duo" variant="solid" instead
|
||||
if (variant === 'solid') folder = 'notdog-solid';
|
||||
if (variant === 'duo-solid') folder = 'notdog-duo-solid';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
}
|
||||
if (family === 'notdog-duo') {
|
||||
folder = 'notdog-duo-solid';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
if (variant === 'solid') folder = 'solid';
|
||||
if (variant === 'duo-solid') folder = 'duo-solid';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/notdog-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
}
|
||||
|
||||
// Chisel (Pro+)
|
||||
@@ -32,35 +26,18 @@ function getIconUrl(name: string, family: string, variant: string) {
|
||||
}
|
||||
|
||||
// Jelly (Pro+)
|
||||
// Correct usage: family="jelly", family="jelly-duo", or family="jelly-fill", variant="regular"
|
||||
if (family === 'jelly') {
|
||||
// NOTE: variant="duo-regular" and variant="fill-regular" are deprecated
|
||||
// Use family="jelly-duo" variant="regular" or family="jelly-fill" variant="regular" instead
|
||||
if (variant === 'regular') folder = 'jelly-regular';
|
||||
if (variant === 'duo-regular') folder = 'jelly-duo-regular';
|
||||
if (variant === 'fill-regular') folder = 'jelly-fill-regular';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
}
|
||||
if (family === 'jelly-duo') {
|
||||
folder = 'jelly-duo-regular';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
}
|
||||
if (family === 'jelly-fill') {
|
||||
folder = 'jelly-fill-regular';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
if (variant === 'regular') folder = 'regular';
|
||||
if (variant === 'duo-regular') folder = 'duo-regular';
|
||||
if (variant === 'fill-regular') folder = 'fill-regular';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/jelly-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
}
|
||||
|
||||
// Slab (Pro+)
|
||||
// Correct usage: family="slab" or family="slab-press", variant="regular"
|
||||
if (family === 'slab') {
|
||||
// NOTE: variant="press-regular" is deprecated, use family="slab-press" variant="regular" instead
|
||||
if (variant === 'solid' || variant === 'regular') folder = 'slab-regular';
|
||||
if (variant === 'press-regular') folder = 'slab-press-regular';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
}
|
||||
if (family === 'slab-press') {
|
||||
folder = 'slab-press-regular';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
if (variant === 'solid' || variant === 'regular') folder = 'regular';
|
||||
if (variant === 'press-regular') folder = 'press-regular';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/slab-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
}
|
||||
|
||||
// Thumbprint (Pro+)
|
||||
@@ -73,21 +50,6 @@ function getIconUrl(name: string, family: string, variant: string) {
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/whiteboard-semibold/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
}
|
||||
|
||||
// Utility (Pro+)
|
||||
// Correct usage: family="utility", family="utility-duo", or family="utility-fill", variant="semibold"
|
||||
if (family === 'utility') {
|
||||
folder = 'utility-semibold';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
}
|
||||
if (family === 'utility-duo') {
|
||||
folder = 'utility-duo-semibold';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
}
|
||||
if (family === 'utility-fill') {
|
||||
folder = 'utility-fill-semibold';
|
||||
return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
|
||||
}
|
||||
|
||||
// Classic
|
||||
if (family === 'classic') {
|
||||
if (variant === 'thin') folder = 'thin';
|
||||
@@ -146,16 +108,10 @@ const library: IconLibrary = {
|
||||
family === 'duotone' ||
|
||||
// Sharp duotone
|
||||
family === 'sharp-duotone' ||
|
||||
// Notdog duo (correct usage: family="notdog-duo")
|
||||
family === 'notdog-duo' ||
|
||||
// NOTE: family="notdog" variant="duo-solid" is deprecated
|
||||
// Notdog duo-solid
|
||||
(family === 'notdog' && variant === 'duo-solid') ||
|
||||
// Jelly duo (correct usage: family="jelly-duo")
|
||||
family === 'jelly-duo' ||
|
||||
// NOTE: family="jelly" variant="duo-regular" is deprecated
|
||||
// Jelly duo-regular
|
||||
(family === 'jelly' && variant === 'duo-regular') ||
|
||||
// Utility duo (correct usage: family="utility-duo")
|
||||
family === 'utility-duo' ||
|
||||
// Thumbprint
|
||||
family === 'thumbprint'
|
||||
) {
|
||||
|
||||
@@ -6,6 +6,9 @@ export default css`
|
||||
--track-color: var(--wa-color-neutral-fill-normal);
|
||||
--track-width: 0.125rem;
|
||||
|
||||
/* Private */
|
||||
--safe-track-width: max(0.5px, round(var(--track-width), 0.5px));
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -51,8 +54,8 @@ export default css`
|
||||
}
|
||||
|
||||
/*
|
||||
* Top
|
||||
*/
|
||||
* Top
|
||||
*/
|
||||
|
||||
.tab-group-top {
|
||||
flex-direction: column;
|
||||
@@ -80,12 +83,12 @@ export default css`
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
border-bottom: solid var(--track-width) var(--track-color);
|
||||
border-bottom: solid var(--safe-track-width) var(--track-color);
|
||||
}
|
||||
|
||||
.tab-group-top .indicator {
|
||||
bottom: calc(-1 * var(--track-width));
|
||||
border-bottom: solid var(--track-width) var(--indicator-color);
|
||||
bottom: calc(-1 * var(--safe-track-width));
|
||||
border-bottom: solid var(--safe-track-width) var(--indicator-color);
|
||||
}
|
||||
|
||||
.tab-group-top .body {
|
||||
@@ -93,8 +96,8 @@ export default css`
|
||||
}
|
||||
|
||||
.tab-group-top ::slotted(wa-tab[active]) {
|
||||
border-block-end: solid var(--track-width) var(--indicator-color);
|
||||
margin-block-end: calc(-1 * var(--track-width));
|
||||
border-block-end: solid var(--safe-track-width) var(--indicator-color);
|
||||
margin-block-end: calc(-1 * var(--safe-track-width));
|
||||
}
|
||||
|
||||
.tab-group-top ::slotted(wa-tab-panel) {
|
||||
@@ -102,8 +105,8 @@ export default css`
|
||||
}
|
||||
|
||||
/*
|
||||
* Bottom
|
||||
*/
|
||||
* Bottom
|
||||
*/
|
||||
|
||||
.tab-group-bottom {
|
||||
flex-direction: column;
|
||||
@@ -131,12 +134,12 @@ export default css`
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
border-top: solid var(--track-width) var(--track-color);
|
||||
border-top: solid var(--safe-track-width) var(--track-color);
|
||||
}
|
||||
|
||||
.tab-group-bottom .indicator {
|
||||
top: calc(-1 * var(--track-width));
|
||||
border-top: solid var(--track-width) var(--indicator-color);
|
||||
top: calc(-1 * var(--safe-track-width));
|
||||
border-top: solid var(--safe-track-width) var(--indicator-color);
|
||||
}
|
||||
|
||||
.tab-group-bottom .body {
|
||||
@@ -144,8 +147,8 @@ export default css`
|
||||
}
|
||||
|
||||
.tab-group-bottom ::slotted(wa-tab[active]) {
|
||||
border-block-start: solid var(--track-width) var(--indicator-color);
|
||||
margin-block-start: calc(-1 * var(--track-width));
|
||||
border-block-start: solid var(--safe-track-width) var(--indicator-color);
|
||||
margin-block-start: calc(-1 * var(--safe-track-width));
|
||||
}
|
||||
|
||||
.tab-group-bottom ::slotted(wa-tab-panel) {
|
||||
@@ -153,8 +156,8 @@ export default css`
|
||||
}
|
||||
|
||||
/*
|
||||
* Start
|
||||
*/
|
||||
* Start
|
||||
*/
|
||||
|
||||
.tab-group-start {
|
||||
flex-direction: row;
|
||||
@@ -167,12 +170,12 @@ export default css`
|
||||
.tab-group-start .tabs {
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
border-inline-end: solid var(--track-width) var(--track-color);
|
||||
border-inline-end: solid var(--safe-track-width) var(--track-color);
|
||||
}
|
||||
|
||||
.tab-group-start .indicator {
|
||||
inset-inline-end: calc(-1 * var(--track-width));
|
||||
border-right: solid var(--track-width) var(--indicator-color);
|
||||
inset-inline-end: calc(-1 * var(--safe-track-width));
|
||||
border-right: solid var(--safe-track-width) var(--indicator-color);
|
||||
}
|
||||
|
||||
.tab-group-start .body {
|
||||
@@ -181,8 +184,8 @@ export default css`
|
||||
}
|
||||
|
||||
.tab-group-start ::slotted(wa-tab[active]) {
|
||||
border-inline-end: solid var(--track-width) var(--indicator-color);
|
||||
margin-inline-end: calc(-1 * var(--track-width));
|
||||
border-inline-end: solid var(--safe-track-width) var(--indicator-color);
|
||||
margin-inline-end: calc(-1 * var(--safe-track-width));
|
||||
}
|
||||
|
||||
.tab-group-start ::slotted(wa-tab-panel) {
|
||||
@@ -190,8 +193,8 @@ export default css`
|
||||
}
|
||||
|
||||
/*
|
||||
* End
|
||||
*/
|
||||
* End
|
||||
*/
|
||||
|
||||
.tab-group-end {
|
||||
flex-direction: row;
|
||||
@@ -204,12 +207,12 @@ export default css`
|
||||
.tab-group-end .tabs {
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
border-left: solid var(--track-width) var(--track-color);
|
||||
border-left: solid var(--safe-track-width) var(--track-color);
|
||||
}
|
||||
|
||||
.tab-group-end .indicator {
|
||||
inset-inline-start: calc(-1 * var(--track-width));
|
||||
border-inline-start: solid var(--track-width) var(--indicator-color);
|
||||
inset-inline-start: calc(-1 * var(--safe-track-width));
|
||||
border-inline-start: solid var(--safe-track-width) var(--indicator-color);
|
||||
}
|
||||
|
||||
.tab-group-end .body {
|
||||
@@ -218,8 +221,8 @@ export default css`
|
||||
}
|
||||
|
||||
.tab-group-end ::slotted(wa-tab[active]) {
|
||||
border-inline-start: solid var(--track-width) var(--indicator-color);
|
||||
margin-inline-start: calc(-1 * var(--track-width));
|
||||
border-inline-start: solid var(--safe-track-width) var(--indicator-color);
|
||||
margin-inline-start: calc(-1 * var(--safe-track-width));
|
||||
}
|
||||
|
||||
.tab-group-end ::slotted(wa-tab-panel) {
|
||||
|
||||
Reference in New Issue
Block a user