Fixed clipped calendar toggle in Firefox (#1213)

* fixed clipped calendar toggle in firefox

* changelog

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

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 `<sl-select>` 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 `<sl-input>` 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 `<sl-tab-group>` that prevented scroll controls from showing when dynamically adding tabs [#1208](https://github.com/shoelace-style/shoelace/issues/1208)
+- Fixed a big in `<sl-input>` that caused the calendar icon to be clipped in Firefox [#1213](https://github.com/shoelace-style/shoelace/pull/1213)
 - Fixed a bug in `<sl-tab>` that caused `sl-tab-show` to be emitted when activating the close button
 - Updated `@shoelace-style/localize` to 3.1.0
 

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 {

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 <input type="date|time">, 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
             })}
           >
             <slot name="prefix" part="prefix" class="input__prefix"></slot>