diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 7f25c4e5..0ef7b0f1 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -13,6 +13,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` that caused the display label to render incorrectly in Chrome after form validation [#1197](https://github.com/shoelace-style/shoelace/discussions/1197) - Fixed a bug in `` that prevented users from applying their own value for `autocapitalize`, `autocomplete`, and `autocorrect` when using `type="password` [#1205](https://github.com/shoelace-style/shoelace/issues/1205) - Fixed a bug in `` that prevented scroll controls from showing when dynamically adding tabs [#1208](https://github.com/shoelace-style/shoelace/issues/1208) +- Fixed a big in `` that caused the calendar icon to be clipped in Firefox [#1213](https://github.com/shoelace-style/shoelace/pull/1213) - Fixed a bug in `` that caused `sl-tab-show` to be emitted when activating the close button - Updated `@shoelace-style/localize` to 3.1.0 diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts index 79870d09..8a02483e 100644 --- a/src/components/input/input.styles.ts +++ b/src/components/input/input.styles.ts @@ -281,12 +281,6 @@ export default css` display: none; } - /* Hide Firefox's clear button on date and time inputs */ - .input--is-firefox input[type='date'], - .input--is-firefox input[type='time'] { - clip-path: inset(0 2em 0 0); - } - /* Hide the built-in number spinner */ .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button, .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button { diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 5ee1ac9f..a2d010ae 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -14,18 +14,6 @@ import styles from './input.styles'; import type { CSSResultGroup } from 'lit'; import type { ShoelaceFormControl } from '../../internal/shoelace-element'; -// -// 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'); - /** * @summary Inputs collect data from the user. * @documentation https://shoelace.style/components/input @@ -447,8 +435,7 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont 'input--disabled': this.disabled, 'input--focused': this.hasFocus, 'input--empty': !this.value, - 'input--no-spin-buttons': this.noSpinButtons, - 'input--is-firefox': isFirefox + 'input--no-spin-buttons': this.noSpinButtons })} >