From 17ee36175be7f97ec34b5926e2c82204c903a5f5 Mon Sep 17 00:00:00 2001 From: Tu Nguyen Date: Mon, 28 Jul 2025 23:29:56 +0700 Subject: [PATCH 1/3] fixed a typo in dropdown doc (#1235) --- packages/webawesome/docs/docs/components/dropdown.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 From 6085b9698c301162d0bced1a70196b4e574bc1c3 Mon Sep 17 00:00:00 2001 From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Date: Mon, 28 Jul 2025 12:30:42 -0400 Subject: [PATCH 2/3] Add tokens to style tooltip borders (#1234) * add tooltip border tokens * target the correct part * target the correct part (for real) --- .../docs/docs/resources/changelog.md | 4 +--- .../docs/docs/tokens/component-groups.md | 22 +++++++++++-------- .../src/components/tooltip/tooltip.css | 6 +++++ .../webawesome/src/styles/themes/awesome.css | 3 +++ .../webawesome/src/styles/themes/default.css | 3 +++ .../webawesome/src/styles/themes/shoelace.css | 3 +++ 6 files changed, 29 insertions(+), 12 deletions(-) diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 0f8d995c5..6b185656f 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -14,13 +14,11 @@ Components with the Experimental badge sh - Added the `icon-position` attribute to `` [discuss:1099] - Added the `animating` custom state to `` +- Added `--wa-tooltip-border-color`, `--wa-tooltip-border-style`, and `--wa-tooltip-border-width` tokens [issue:1224] ### 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] ## 3.0.0-beta.3 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/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/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); From 6c8bbd51d1f306e434e7dd043159a899f7bca4d2 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 28 Jul 2025 13:55:12 -0400 Subject: [PATCH 3/3] Add missing dependency for React wrappers (#1242) * add dep * remove dev dep --- package-lock.json | 19 ++++++++----------- package.json | 4 +--- .../docs/docs/resources/changelog.md | 1 + packages/webawesome/package.json | 1 + 4 files changed, 11 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index c2b92e3ee..fecfd124f 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" @@ -5799,8 +5796,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 +13976,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", @@ -13998,6 +13995,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 +14018,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/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 6b185656f..77b1c94f4 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -20,6 +20,7 @@ Components with the Experimental badge sh - Fixed a bug in `` that caused the content to overflow the container when animating [issue:1149] - 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/package.json b/packages/webawesome/package.json index 8843ba08c..7632a804c 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",