diff --git a/docs/components/input.md b/docs/components/input.md index 499c9ca7..7b0f4251 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -5,7 +5,7 @@ Inputs collect data from the user. ```html preview - + ``` ```jsx react diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index d1de314d..7babfcd9 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -18,6 +18,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Fixed a bug in `` that prevented the `arrow-padding` attribute from working as expected - Improved accessibility of `` so keyboard nav works better and screen readers announce it properly - Improved accessibility of `` so screen readers no longer skip over it +- Removed a user agent sniffing notice that appeared in Chrome [#855](https://github.com/shoelace-style/shoelace/issues/855) - Removed the default hover effect in `` to make selections more obvious - Updated Floating UI to 1.0.1 - Updated esbuild to 0.15.1 diff --git a/package-lock.json b/package-lock.json index a8b54feb..35a8b01a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,7 +63,8 @@ "sinon": "^14.0.0", "strip-css-comments": "^5.0.0", "tslib": "^2.4.0", - "typescript": "4.7.4" + "typescript": "4.7.4", + "user-agent-data-types": "^0.3.0" }, "engines": { "node": ">=14.17.0" @@ -14460,6 +14461,12 @@ "node": ">= 4" } }, + "node_modules/user-agent-data-types": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/user-agent-data-types/-/user-agent-data-types-0.3.0.tgz", + "integrity": "sha512-AI3vPwmafXd4r/mSbubOu6S1ngO4vdvJFAJdP0MUc9Y4SwXm/Pqpno0R/O4Zt26vZYzWorV+4BgVcntxhJlMPw==", + "dev": true + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -25851,6 +25858,12 @@ "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=", "dev": true }, + "user-agent-data-types": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/user-agent-data-types/-/user-agent-data-types-0.3.0.tgz", + "integrity": "sha512-AI3vPwmafXd4r/mSbubOu6S1ngO4vdvJFAJdP0MUc9Y4SwXm/Pqpno0R/O4Zt26vZYzWorV+4BgVcntxhJlMPw==", + "dev": true + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index f1d283bf..97ab0ae0 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,8 @@ "sinon": "^14.0.0", "strip-css-comments": "^5.0.0", "tslib": "^2.4.0", - "typescript": "4.7.4" + "typescript": "4.7.4", + "user-agent-data-types": "^0.3.0" }, "lint-staged": { "*.{ts,js}": [ diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 1ebf5c6c..ef145910 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -13,6 +13,17 @@ import '../icon/icon'; import styles from './input.styles'; import type { CSSResultGroup } from 'lit'; +// It's currently impossible to hide Firefox's built-in clear icon when using , so we need this +// check to apply a clip-path to hide it. I know, I know...user agent sniffing is nasty but, if it fails, we only see a +// redundant clear icon so nothing important is breaking. The benefits outweigh the costs for this one. See the +// discussion at: https://github.com/shoelace-style/shoelace/pull/794 +// +// Also note that we do the Chromium check first to prevent Chrome from logging a console notice as described here: +// https://github.com/shoelace-style/shoelace/issues/855 +// +const isChromium = navigator.userAgentData?.brands.some(b => b.brand.includes('Chromium')); +const isFirefox = isChromium ? false : navigator.userAgent.includes('Firefox'); + /** * @since 2.0 * @status stable @@ -369,12 +380,7 @@ export default class SlInput extends LitElement { 'input--empty': !this.value, 'input--invalid': this.invalid, 'input--no-spin-buttons': this.noSpinButtons, - - // It's currently impossible to hide Firefox's built-in clear icon when using , so - // we need this check to apply a clip-path to hide it. I know, I know...user agent sniffing is nasty but - // if it fails, we only see a redundant clear icon so nothing important is breaking. The benefits outweigh - // the costs for this one. See the discussion at: https://github.com/shoelace-style/shoelace/pull/794 - 'input--is-firefox': navigator.userAgent.includes('Firefox') + 'input--is-firefox': isFirefox })} > diff --git a/tsconfig.json b/tsconfig.json index 7cc81f87..f526b262 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,7 +26,10 @@ "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "useUnknownInCatchVariables": true, - "baseUrl": "." + "baseUrl": ".", + "types": [ + "./node_modules/user-agent-data-types" + ] }, "include": [ "src"