diff --git a/package-lock.json b/package-lock.json index c2b92e3ee..cce044818 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@custom-elements-manifest/analyzer": "^0.10.4", "@lit-labs/eleventy-plugin-lit": "^1.0.3", "@lit-labs/testing": "^0.2.5", - "@lit/react": "^1.0.6", + "@lit/react": "^1.0.8", "@open-wc/testing": "^3.2.0", "@types/mocha": "^10.0.10", "@types/react": "^18.2.28", @@ -2029,10 +2029,9 @@ } }, "node_modules/@lit/react": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.7.tgz", - "integrity": "sha512-cencnwwLXQKiKxjfFzSgZRngcWJzUDZi/04E0fSaF86wZgchMdvTyu+lE36DrUfvuus3bH8+xLPrhM1cTjwpzw==", - "dev": true, + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.8.tgz", + "integrity": "sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==", "peerDependencies": { "@types/react": "17 || 18 || 19" } @@ -2876,8 +2875,7 @@ "node_modules/@types/prop-types": { "version": "15.7.14", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", - "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", - "dev": true + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==" }, "node_modules/@types/qs": { "version": "6.9.11", @@ -2895,7 +2893,6 @@ "version": "18.3.23", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz", "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==", - "dev": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -2986,6 +2983,12 @@ "@types/node": "*" } }, + "node_modules/@wc-toolkit/jsx-types": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@wc-toolkit/jsx-types/-/jsx-types-1.3.0.tgz", + "integrity": "sha512-2rcRyPNEAdesFlokSSFBuCjpPPrMySk4NqyVJsqCs/WczcAUnIGwjnJk2fd/SNmzSjxGFRIFLAhXOgFOHLPvxQ==", + "dev": true + }, "node_modules/@web/browser-logs": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz", @@ -5799,8 +5802,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/custom-element-jet-brains-integration": { "version": "1.7.0", @@ -13980,6 +13982,7 @@ "dependencies": { "@ctrl/tinycolor": "^4.1.0", "@floating-ui/dom": "^1.6.13", + "@lit/react": "^1.0.8", "@shoelace-style/animations": "^1.2.0", "@shoelace-style/localize": "^3.2.1", "composed-offset-position": "^0.0.6", @@ -13988,6 +13991,9 @@ "qr-creator": "^1.0.0", "style-observer": "^0.0.7" }, + "devDependencies": { + "@wc-toolkit/jsx-types": "^1.3.0" + }, "engines": { "node": ">=14.17.0" } @@ -13998,6 +14004,7 @@ "dependencies": { "@ctrl/tinycolor": "^4.1.0", "@floating-ui/dom": "^1.6.13", + "@lit/react": "^1.0.8", "@shoelace-style/animations": "^1.2.0", "@shoelace-style/localize": "^3.2.1", "composed-offset-position": "^0.0.6", @@ -14020,7 +14027,6 @@ "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "bin": { "nanoid": "bin/nanoid.js" }, diff --git a/package.json b/package.json index 633066876..3393e2f48 100644 --- a/package.json +++ b/package.json @@ -18,13 +18,12 @@ "engines": { "node": ">=14.17.0" }, - "dependencies": {}, "devDependencies": { "@11ty/eleventy": "3.0.0", "@custom-elements-manifest/analyzer": "^0.10.4", "@lit-labs/eleventy-plugin-lit": "^1.0.3", "@lit-labs/testing": "^0.2.5", - "@lit/react": "^1.0.6", + "@lit/react": "^1.0.8", "@open-wc/testing": "^3.2.0", "@types/mocha": "^10.0.10", "@types/react": "^18.2.28", @@ -87,4 +86,3 @@ ] } } - diff --git a/packages/webawesome/custom-elements-manifest.js b/packages/webawesome/custom-elements-manifest.js index 5597c0c2b..6588d92f6 100644 --- a/packages/webawesome/custom-elements-manifest.js +++ b/packages/webawesome/custom-elements-manifest.js @@ -1,3 +1,4 @@ +import { jsxTypesPlugin } from '@wc-toolkit/jsx-types'; import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration'; import { customElementVsCodePlugin } from 'custom-element-vs-code-integration'; // import { customElementVuejsPlugin } from 'custom-element-vuejs-integration'; @@ -164,6 +165,7 @@ export default { ], }), + // Generate custom JetBrains data customElementJetBrainsPlugin({ outdir: './dist-cdn', excludeCss: true, @@ -176,6 +178,12 @@ export default { }, }), + // Generate JSX types (see https://wc-toolkit.com/integrations/jsx/) + jsxTypesPlugin({ + fileName: 'custom-elements-jsx.d.ts', + outdir, + }), + // // TODO - figure out why this broke when events were updated // diff --git a/packages/webawesome/docs/docs/components/dropdown.md b/packages/webawesome/docs/docs/components/dropdown.md index 94c3bd83b..18aebfb64 100644 --- a/packages/webawesome/docs/docs/components/dropdown.md +++ b/packages/webawesome/docs/docs/components/dropdown.md @@ -273,10 +273,10 @@ The distance from the panel to the trigger can be customized using the `distance ### Offset -The offset of the panel along the trigger can be customized using the `offset` attribute. This value is specified in pixels. +The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels. ```html {.example} - + Edit Cut diff --git a/packages/webawesome/docs/docs/components/popover.md b/packages/webawesome/docs/docs/components/popover.md index 39014dd8b..a6a3e61fa 100644 --- a/packages/webawesome/docs/docs/components/popover.md +++ b/packages/webawesome/docs/docs/components/popover.md @@ -91,7 +91,7 @@ Use the `distance` attribute to control how far the popover appears from its anc ### Arrow Size -Use the `--arrow-size` custom property to change the size of the popover's arrow. Set it to `0` to remove the arrow entirely. +Use the `--arrow-size` custom property to change the size of the popover's arrow. To remove it, use the `without-arrow` attribute. ```html {.example}
@@ -99,7 +99,7 @@ Use the `--arrow-size` custom property to change the size of the popover's arrow I have a big arrow No arrow - I don't have an arrow + I don't have an arrow
``` diff --git a/packages/webawesome/docs/docs/components/tooltip.md b/packages/webawesome/docs/docs/components/tooltip.md index 7faf2bb70..e76b618e4 100644 --- a/packages/webawesome/docs/docs/components/tooltip.md +++ b/packages/webawesome/docs/docs/components/tooltip.md @@ -113,11 +113,11 @@ Tooltips can be controller programmatically by setting the `trigger` attribute t ### Removing Arrows -You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove them, set the value to `0` as shown below. +You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove the arrow, use the `without-arrow` attribute. ```html {.example} No Arrow -This is a tooltip with no arrow +This is a tooltip with no arrow ``` To override it globally, set it in a root block in your stylesheet after the Web Awesome stylesheet is loaded. diff --git a/packages/webawesome/docs/docs/index.md b/packages/webawesome/docs/docs/index.md index 106d4a03f..b1b62f36f 100644 --- a/packages/webawesome/docs/docs/index.md +++ b/packages/webawesome/docs/docs/index.md @@ -22,6 +22,7 @@ To get everything included in Web Awesome, add the following code to the ` ``` This snippet adds: + - **Web Awesome styles**, a collection of stylesheets including essential default theme styles, optional [styles for native elements](/docs/utilities/native) and optional [utility classes](/docs/utilities) - **The autoloader**, a lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically @@ -47,6 +48,7 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You --- {# This looks weird, but without it, markdownItAttrs flags the raw calls incorrectly. #} +
{%- raw -%} {% if currentUser.hasPro %} @@ -57,7 +59,6 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You {% endraw %}
- ## Advanced Setup The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods. @@ -98,15 +99,15 @@ Web Awesome does not a provide a single import with all Web Awesome components. ```js // Option 1: import all Web Awesome styles -import "@awesome.me/webawesome/dist/styles/webawesome.css" +import '@awesome.me/webawesome/dist/styles/webawesome.css'; // Option 2: import only the default theme -import "@awesome.me/webawesome/dist/styles/themes/default.css" +import '@awesome.me/webawesome/dist/styles/themes/default.css'; // -import "@awesome.me/webawesome/dist/components/button/button.js" +import '@awesome.me/webawesome/dist/components/button/button.js'; // -import "@awesome.me/webawesome/dist/components/input/input.js" +import '@awesome.me/webawesome/dist/components/input/input.js'; ``` Once they've been imported, you can use them in your HTML normally. Component imports are located in the "Importing" section of each component's documentation. @@ -148,13 +149,63 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you ``` -## The difference between `/dist` and `/dist-cdn` +### The Difference Between `/dist` & `/dist-cdn` -If you have Web Awesome installed locally via NPM, you'll notice 2 directories. `/dist-cdn` and `/cdn`. +If you have Web Awesome installed locally via npm, you'll notice the following directories in the project's root: -The `/dist-cdn` files are bundled differently than the `/dist` files. The `/dist-cdn` files come pre-bundled, which means all dependencies are "inlined" so there are no "bare" references like `import "lit"`. The `/dist` files **DO NOT** come pre-bundled, allowing your bundler of choice to more efficiently de-duplicate dependencies, resulting in smaller bundles and optimal code sharing. +``` +dist/ +dist-cdn/ +``` -TLDR: +The `dist-cdn` files come with everything bundled together, so you can use them directly without a build tool. The dist files keep dependencies separate, which lets your bundler optimize and share code more efficiently. -- `@awesome.me/webawesome/dist-cdn` is for CDNs or people not using a bundler. -- `@awesome.me/webawesome/dist` is for bundlers or importmaps. +Use `dist-cdn` if you're loading directly in the browser or from a CDN. Use `dist` if you're using a bundler like Webpack or Vite. + +## React Users + +React 19+ [supports custom elements](https://react.dev/blog/2024/04/25/react-19#support-for-custom-elements), so you can import them and use them as you'd expect. Just make sure you've included your Web Awesome theme into your app first. + +```jsx +import '@awesome.me/webawesome/dist/components/button/button.js'; + +function App() { + return Button; +} + +export default App; +``` + +If you're using TypeScript, you can add type safety using the types file located at: + +``` +node_modules/@awesome.me/webawesome/dist/custom-elements-jsx.d.ts +``` + +This gives you inline documentation, autocomplete, and type-safe validation for every component. You can add the types to your project by updating your `tsconfig.json` file as shown below. + +```json +{ + "compilerOptions": { + "types": ["node-modules/@awesome.me/webawesome/dist/custom-elements-jsx.d.ts"] + } +} +``` + +Another way is to create a declaration file and extend JSX's `IntrinsicElements`: + +```ts +import type { CustomElements, CustomCssProperties } from '@awesome.me/webawesome/dist/custom-elements-jsx.d.ts'; + +declare module 'react' { + namespace JSX { + interface IntrinsicElements extends CustomElements {} + } + interface CSSProperties extends CustomCssProperties {} +} +``` + +:::details React 18 and below +React 18 and below have [poor support](https://custom-elements-everywhere.com/#react) for custom elements. For legacy versions of React, we provide React wrappers for every component. You can find the import instructions by selecting the _React_ tab from the _Importing_ section of each +component's documentation. +::: diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 0f8d995c5..00b8c75b4 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -13,15 +13,16 @@ Components with the Experimental badge sh ### New Features {data-no-outline} - Added the `icon-position` attribute to `` [discuss:1099] -- Added the `animating` custom state to `` +- Added the `animating` custom state to `` [pr:1214] +- Added `--wa-tooltip-border-color`, `--wa-tooltip-border-style`, and `--wa-tooltip-border-width` tokens [issue:1224] +- Added the `without-arrow` attribute to `` and `` to hide arrows without artifacts +- Added JSX types for use with React and others [pr:1256] ### Bug Fixes and Improvements {data-no-outline} - Fixed a bug in `` that caused the content to overflow the container when animating [issue:1149] - -### Bug Fixes and Improvements {data-no-outline} - - Fixed a bug in `` and `` that prevented the header from showing when the label was missing [issue:1209] +- Fixed a missing dependency required for React wrappers ## 3.0.0-beta.3 diff --git a/packages/webawesome/docs/docs/resources/visual-tests.md b/packages/webawesome/docs/docs/resources/visual-tests.md index 781a5dcea..66c86d651 100644 --- a/packages/webawesome/docs/docs/resources/visual-tests.md +++ b/packages/webawesome/docs/docs/resources/visual-tests.md @@ -6,26 +6,33 @@ wide: true --- diff --git a/packages/webawesome/docs/docs/tokens/component-groups.md b/packages/webawesome/docs/docs/tokens/component-groups.md index 3cf963990..a438c0d10 100644 --- a/packages/webawesome/docs/docs/tokens/component-groups.md +++ b/packages/webawesome/docs/docs/tokens/component-groups.md @@ -2,6 +2,7 @@ title: Component Groups description: Style groups of components that share similar qualities with these Web Awesome custom properties. order: 9999 +layout: page-outline --- For components that share similar qualities, Web Awesome includes custom properties to change the appearance of these related components all at once. @@ -84,16 +85,19 @@ Panels consist of components with larger, contained surface areas like [callout] ## Tooltips -Tooltip styles are shared between the [tooltip](/docs/components/tooltip) component and the tooltip implementation in [range](/docs/components/range). +Tooltip styles are shared between the [tooltip](/docs/components/tooltip) component and the tooltips in [slider](/docs/components/slider) and [copy button](/docs/components/copy-button). -| Custom Property | Default Value | -| ---------------------------- | ----------------------------------- | -| `--wa-tooltip-arrow-size` | `0.375rem` (6px) | -| `--wa-tooltip-background-color` | `var(--wa-color-neutral-fill-loud)` | -| `--wa-tooltip-border-radius` | `var(--wa-border-radius-m)` | -| `--wa-tooltip-content-color` | `var(--wa-color-neutral-on-loud)` | -| `--wa-tooltip-font-size` | `var(--wa-font-size-s)` | -| `--wa-tooltip-line-height` | `var(--wa-line-height-normal)` | +| Custom Property | Default Value | +| ------------------------------- | ------------------------------------ | +| `--wa-tooltip-arrow-size` | `0.375rem` (6px) | +| `--wa-tooltip-background-color` | `var(--wa-color-neutral-fill-loud)` | +| `--wa-tooltip-border-color` | `var(--wa-tooltip-background-color)` | +| `--wa-tooltip-border-style` | `var(--wa-border-style)` | +| `--wa-tooltip-border-width` | `var(--wa-border-width-s)` | +| `--wa-tooltip-border-radius` | `var(--wa-border-radius-s)` | +| `--wa-tooltip-content-color` | `var(--wa-color-neutral-on-loud)` | +| `--wa-tooltip-font-size` | `var(--wa-font-size-s)` | +| `--wa-tooltip-line-height` | `var(--wa-line-height-normal)` | ```html {.example} diff --git a/packages/webawesome/package.json b/packages/webawesome/package.json index 8843ba08c..966cf135c 100644 --- a/packages/webawesome/package.json +++ b/packages/webawesome/package.json @@ -73,6 +73,7 @@ "dependencies": { "@ctrl/tinycolor": "^4.1.0", "@floating-ui/dom": "^1.6.13", + "@lit/react": "^1.0.8", "@shoelace-style/animations": "^1.2.0", "@shoelace-style/localize": "^3.2.1", "composed-offset-position": "^0.0.6", @@ -85,5 +86,8 @@ "*.{ts,js}": [ "prettier --write" ] + }, + "devDependencies": { + "@wc-toolkit/jsx-types": "^1.3.0" } } diff --git a/packages/webawesome/src/components/popover/popover.ts b/packages/webawesome/src/components/popover/popover.ts index 331b9d871..376263663 100644 --- a/packages/webawesome/src/components/popover/popover.ts +++ b/packages/webawesome/src/components/popover/popover.ts @@ -85,6 +85,9 @@ export default class WaPopover extends WebAwesomeElement { /** The ID of the popover's anchor element. This must be an interactive/focusable element such as a button. */ @property() for: string | null = null; + /** Removes the arrow from the popover. */ + @property({ attribute: 'without-arrow', type: Boolean, reflect: true }) withoutArrow = false; + private eventController = new AbortController(); connectedCallback() { @@ -300,7 +303,7 @@ export default class WaPopover extends WebAwesomeElement { skidding=${this.skidding} flip shift - arrow + ?arrow=${!this.withoutArrow} .anchor=${this.anchor} >
diff --git a/packages/webawesome/src/components/tooltip/tooltip.css b/packages/webawesome/src/components/tooltip/tooltip.css index da122d150..6dc3d2ebc 100644 --- a/packages/webawesome/src/components/tooltip/tooltip.css +++ b/packages/webawesome/src/components/tooltip/tooltip.css @@ -44,7 +44,13 @@ max-width: var(--max-width); border-radius: var(--wa-tooltip-border-radius); background-color: var(--wa-tooltip-background-color); + border: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color); padding: 0.25em 0.5em; user-select: none; -webkit-user-select: none; } + +.tooltip::part(arrow) { + border-bottom: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color); + border-right: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color); +} diff --git a/packages/webawesome/src/components/tooltip/tooltip.ts b/packages/webawesome/src/components/tooltip/tooltip.ts index 4b0720c17..e4c103d94 100644 --- a/packages/webawesome/src/components/tooltip/tooltip.ts +++ b/packages/webawesome/src/components/tooltip/tooltip.ts @@ -89,6 +89,9 @@ export default class WaTooltip extends WebAwesomeElement { */ @property() trigger = 'hover focus'; + /** Removes the arrow from the tooltip. */ + @property({ attribute: 'without-arrow', type: Boolean, reflect: true }) withoutArrow = false; + @property() for: string | null = null; @state() anchor: null | Element = null; @@ -332,7 +335,7 @@ export default class WaTooltip extends WebAwesomeElement { skidding=${this.skidding} flip shift - arrow + ?arrow=${!this.withoutArrow} hover-bridge .anchor=${this.anchor} > diff --git a/packages/webawesome/src/styles/themes/awesome.css b/packages/webawesome/src/styles/themes/awesome.css index 746566cdc..7e6bd1cc5 100644 --- a/packages/webawesome/src/styles/themes/awesome.css +++ b/packages/webawesome/src/styles/themes/awesome.css @@ -351,6 +351,9 @@ --wa-tooltip-background-color: var(--wa-color-text-normal); + --wa-tooltip-border-color: var(--wa-tooltip-background-color); + --wa-tooltip-border-style: var(--wa-border-style); + --wa-tooltip-border-width: var(--wa-border-width-s); --wa-tooltip-border-radius: var(--wa-border-radius-s); --wa-tooltip-content-color: var(--wa-color-surface-default); diff --git a/packages/webawesome/src/styles/themes/default.css b/packages/webawesome/src/styles/themes/default.css index 0be28d86a..350aaefaf 100644 --- a/packages/webawesome/src/styles/themes/default.css +++ b/packages/webawesome/src/styles/themes/default.css @@ -347,6 +347,9 @@ --wa-tooltip-background-color: var(--wa-color-text-normal); + --wa-tooltip-border-color: var(--wa-tooltip-background-color); + --wa-tooltip-border-style: var(--wa-border-style); + --wa-tooltip-border-width: var(--wa-border-width-s); --wa-tooltip-border-radius: var(--wa-border-radius-s); --wa-tooltip-content-color: var(--wa-color-surface-default); diff --git a/packages/webawesome/src/styles/themes/shoelace.css b/packages/webawesome/src/styles/themes/shoelace.css index 5f5e327c5..1fb80d1f7 100644 --- a/packages/webawesome/src/styles/themes/shoelace.css +++ b/packages/webawesome/src/styles/themes/shoelace.css @@ -350,6 +350,9 @@ --wa-tooltip-background-color: var(--wa-color-text-normal); + --wa-tooltip-border-color: var(--wa-tooltip-background-color); + --wa-tooltip-border-style: var(--wa-border-style); + --wa-tooltip-border-width: var(--wa-border-width-s); --wa-tooltip-border-radius: var(--wa-border-radius-s); --wa-tooltip-content-color: var(--wa-color-surface-default); diff --git a/packages/webawesome/src/translations/de.ts b/packages/webawesome/src/translations/de.ts index eec4e1056..9db289304 100644 --- a/packages/webawesome/src/translations/de.ts +++ b/packages/webawesome/src/translations/de.ts @@ -34,7 +34,7 @@ const translation: Translation = { selectAColorFromTheScreen: 'Farbe vom Bildschirm auswählen', showPassword: 'Passwort anzeigen', slideNum: slide => `Folie ${slide}`, - toggleColorFormat: 'Farbformat umschalten', + toggleColorFormat: 'Farbformat wechseln', zoomIn: 'Hineinzoomen', zoomOut: 'Herauszoomen', };