Remove border: none from TextInput internal styles (#1606)

segmentio · Feb 3, 2023 · dc06b14 · dc06b14
1 parent 0fbed42
commit dc06b14
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 10 deletions.
diff --git a/src/file-picker/__tests__/__snapshots__/FilePicker.test.js.snap b/src/file-picker/__tests__/__snapshots__/FilePicker.test.js.snap
@@ -12,7 +12,7 @@ exports[`<FilePicker /> snapshot - multiple files selected 1`] = `
     />
     <input
       aria-invalid="false"
-      class="evergreen-file-picker-text-input ub-w_280px ub-fnt-fam_b77syt ub-b-btm_none ub-b-lft_none ub-b-rgt_none ub-b-top_none ub-otln_iu2jf4 ub-txt-deco_none ub-b-btm-clr_d8dae5 ub-b-lft-clr_d8dae5 ub-b-rgt-clr_d8dae5 ub-b-top-clr_d8dae5 ub-bblr_4px ub-bbrr_0-important ub-btlr_4px ub-btrr_0-important ub-b-btm-stl_solid ub-b-lft-stl_solid ub-b-rgt-stl_solid ub-b-top-stl_solid ub-b-btm-wdt_1px ub-b-lft-wdt_1px ub-b-rgt-wdt_1px ub-b-top-wdt_1px ub-color_474d66 ub-fnt-sze_12px ub-ln-ht_16px ub-pl_12px ub-pr_12px ub-tstn_n1akt6 ub-h_32px ub-bg-clr_white ub-color_8f95b2_1b2gqua ub-crsr_not-allowed_10nxvc1 ub-bg-clr_F4F5F9_10nxvc1 ub-color_696f8c_10nxvc1 ub-z-idx_2_1bcl2f4 ub-bs_13po50p_1bcl2f4 ub-b-btm-clr_ADC2FF_1bcl2f4 ub-b-lft-clr_ADC2FF_1bcl2f4 ub-b-rgt-clr_ADC2FF_1bcl2f4 ub-b-top-clr_ADC2FF_1bcl2f4 ub-b-btm-clr_D14343_fpx4do ub-b-lft-clr_D14343_fpx4do ub-b-rgt-clr_D14343_fpx4do ub-b-top-clr_D14343_fpx4do ub-flx_1 ub-txt-ovrf_ellipsis ub-f-wght_400 ub-ltr-spc_0 ub-box-szg_border-box"
+      class="evergreen-file-picker-text-input ub-w_280px ub-fnt-fam_b77syt ub-otln_iu2jf4 ub-txt-deco_none ub-b-btm-clr_d8dae5 ub-b-lft-clr_d8dae5 ub-b-rgt-clr_d8dae5 ub-b-top-clr_d8dae5 ub-bblr_4px ub-bbrr_0-important ub-btlr_4px ub-btrr_0-important ub-b-btm-stl_solid ub-b-lft-stl_solid ub-b-rgt-stl_solid ub-b-top-stl_solid ub-b-btm-wdt_1px ub-b-lft-wdt_1px ub-b-rgt-wdt_1px ub-b-top-wdt_1px ub-color_474d66 ub-fnt-sze_12px ub-ln-ht_16px ub-pl_12px ub-pr_12px ub-tstn_n1akt6 ub-h_32px ub-bg-clr_white ub-color_8f95b2_1b2gqua ub-crsr_not-allowed_10nxvc1 ub-bg-clr_F4F5F9_10nxvc1 ub-color_696f8c_10nxvc1 ub-z-idx_2_1bcl2f4 ub-bs_13po50p_1bcl2f4 ub-b-btm-clr_ADC2FF_1bcl2f4 ub-b-lft-clr_ADC2FF_1bcl2f4 ub-b-rgt-clr_ADC2FF_1bcl2f4 ub-b-top-clr_ADC2FF_1bcl2f4 ub-b-btm-clr_D14343_fpx4do ub-b-lft-clr_D14343_fpx4do ub-b-rgt-clr_D14343_fpx4do ub-b-top-clr_D14343_fpx4do ub-flx_1 ub-txt-ovrf_ellipsis ub-f-wght_400 ub-ltr-spc_0 ub-box-szg_border-box"
       placeholder="Select a file to upload…"
       readonly=""
       spellcheck="true"
@@ -40,7 +40,7 @@ exports[`<FilePicker /> snapshot - no file selected 1`] = `
     />
     <input
       aria-invalid="false"
-      class="evergreen-file-picker-text-input ub-w_280px ub-fnt-fam_b77syt ub-b-btm_none ub-b-lft_none ub-b-rgt_none ub-b-top_none ub-otln_iu2jf4 ub-txt-deco_none ub-b-btm-clr_d8dae5 ub-b-lft-clr_d8dae5 ub-b-rgt-clr_d8dae5 ub-b-top-clr_d8dae5 ub-bblr_4px ub-bbrr_0-important ub-btlr_4px ub-btrr_0-important ub-b-btm-stl_solid ub-b-lft-stl_solid ub-b-rgt-stl_solid ub-b-top-stl_solid ub-b-btm-wdt_1px ub-b-lft-wdt_1px ub-b-rgt-wdt_1px ub-b-top-wdt_1px ub-color_474d66 ub-fnt-sze_12px ub-ln-ht_16px ub-pl_12px ub-pr_12px ub-tstn_n1akt6 ub-h_32px ub-bg-clr_white ub-color_8f95b2_1b2gqua ub-crsr_not-allowed_10nxvc1 ub-bg-clr_F4F5F9_10nxvc1 ub-color_696f8c_10nxvc1 ub-z-idx_2_1bcl2f4 ub-bs_13po50p_1bcl2f4 ub-b-btm-clr_ADC2FF_1bcl2f4 ub-b-lft-clr_ADC2FF_1bcl2f4 ub-b-rgt-clr_ADC2FF_1bcl2f4 ub-b-top-clr_ADC2FF_1bcl2f4 ub-b-btm-clr_D14343_fpx4do ub-b-lft-clr_D14343_fpx4do ub-b-rgt-clr_D14343_fpx4do ub-b-top-clr_D14343_fpx4do ub-flx_1 ub-txt-ovrf_ellipsis ub-f-wght_400 ub-ltr-spc_0 ub-box-szg_border-box"
+      class="evergreen-file-picker-text-input ub-w_280px ub-fnt-fam_b77syt ub-otln_iu2jf4 ub-txt-deco_none ub-b-btm-clr_d8dae5 ub-b-lft-clr_d8dae5 ub-b-rgt-clr_d8dae5 ub-b-top-clr_d8dae5 ub-bblr_4px ub-bbrr_0-important ub-btlr_4px ub-btrr_0-important ub-b-btm-stl_solid ub-b-lft-stl_solid ub-b-rgt-stl_solid ub-b-top-stl_solid ub-b-btm-wdt_1px ub-b-lft-wdt_1px ub-b-rgt-wdt_1px ub-b-top-wdt_1px ub-color_474d66 ub-fnt-sze_12px ub-ln-ht_16px ub-pl_12px ub-pr_12px ub-tstn_n1akt6 ub-h_32px ub-bg-clr_white ub-color_8f95b2_1b2gqua ub-crsr_not-allowed_10nxvc1 ub-bg-clr_F4F5F9_10nxvc1 ub-color_696f8c_10nxvc1 ub-z-idx_2_1bcl2f4 ub-bs_13po50p_1bcl2f4 ub-b-btm-clr_ADC2FF_1bcl2f4 ub-b-lft-clr_ADC2FF_1bcl2f4 ub-b-rgt-clr_ADC2FF_1bcl2f4 ub-b-top-clr_ADC2FF_1bcl2f4 ub-b-btm-clr_D14343_fpx4do ub-b-lft-clr_D14343_fpx4do ub-b-rgt-clr_D14343_fpx4do ub-b-top-clr_D14343_fpx4do ub-flx_1 ub-txt-ovrf_ellipsis ub-f-wght_400 ub-ltr-spc_0 ub-box-szg_border-box"
       placeholder="Select a file to upload…"
       readonly=""
       spellcheck="true"
@@ -68,7 +68,7 @@ exports[`<FilePicker /> snapshot - one file seleted 1`] = `
     />
     <input
       aria-invalid="false"
-      class="evergreen-file-picker-text-input ub-w_280px ub-fnt-fam_b77syt ub-b-btm_none ub-b-lft_none ub-b-rgt_none ub-b-top_none ub-otln_iu2jf4 ub-txt-deco_none ub-b-btm-clr_d8dae5 ub-b-lft-clr_d8dae5 ub-b-rgt-clr_d8dae5 ub-b-top-clr_d8dae5 ub-bblr_4px ub-bbrr_0-important ub-btlr_4px ub-btrr_0-important ub-b-btm-stl_solid ub-b-lft-stl_solid ub-b-rgt-stl_solid ub-b-top-stl_solid ub-b-btm-wdt_1px ub-b-lft-wdt_1px ub-b-rgt-wdt_1px ub-b-top-wdt_1px ub-color_474d66 ub-fnt-sze_12px ub-ln-ht_16px ub-pl_12px ub-pr_12px ub-tstn_n1akt6 ub-h_32px ub-bg-clr_white ub-color_8f95b2_1b2gqua ub-crsr_not-allowed_10nxvc1 ub-bg-clr_F4F5F9_10nxvc1 ub-color_696f8c_10nxvc1 ub-z-idx_2_1bcl2f4 ub-bs_13po50p_1bcl2f4 ub-b-btm-clr_ADC2FF_1bcl2f4 ub-b-lft-clr_ADC2FF_1bcl2f4 ub-b-rgt-clr_ADC2FF_1bcl2f4 ub-b-top-clr_ADC2FF_1bcl2f4 ub-b-btm-clr_D14343_fpx4do ub-b-lft-clr_D14343_fpx4do ub-b-rgt-clr_D14343_fpx4do ub-b-top-clr_D14343_fpx4do ub-flx_1 ub-txt-ovrf_ellipsis ub-f-wght_400 ub-ltr-spc_0 ub-box-szg_border-box"
+      class="evergreen-file-picker-text-input ub-w_280px ub-fnt-fam_b77syt ub-otln_iu2jf4 ub-txt-deco_none ub-b-btm-clr_d8dae5 ub-b-lft-clr_d8dae5 ub-b-rgt-clr_d8dae5 ub-b-top-clr_d8dae5 ub-bblr_4px ub-bbrr_0-important ub-btlr_4px ub-btrr_0-important ub-b-btm-stl_solid ub-b-lft-stl_solid ub-b-rgt-stl_solid ub-b-top-stl_solid ub-b-btm-wdt_1px ub-b-lft-wdt_1px ub-b-rgt-wdt_1px ub-b-top-wdt_1px ub-color_474d66 ub-fnt-sze_12px ub-ln-ht_16px ub-pl_12px ub-pr_12px ub-tstn_n1akt6 ub-h_32px ub-bg-clr_white ub-color_8f95b2_1b2gqua ub-crsr_not-allowed_10nxvc1 ub-bg-clr_F4F5F9_10nxvc1 ub-color_696f8c_10nxvc1 ub-z-idx_2_1bcl2f4 ub-bs_13po50p_1bcl2f4 ub-b-btm-clr_ADC2FF_1bcl2f4 ub-b-lft-clr_ADC2FF_1bcl2f4 ub-b-rgt-clr_ADC2FF_1bcl2f4 ub-b-top-clr_ADC2FF_1bcl2f4 ub-b-btm-clr_D14343_fpx4do ub-b-lft-clr_D14343_fpx4do ub-b-rgt-clr_D14343_fpx4do ub-b-top-clr_D14343_fpx4do ub-flx_1 ub-txt-ovrf_ellipsis ub-f-wght_400 ub-ltr-spc_0 ub-box-szg_border-box"
       placeholder="Select a file to upload…"
       readonly=""
       spellcheck="true"

diff --git a/src/text-input/__tests__/TextInput.test.js b/src/text-input/__tests__/TextInput.test.js
@@ -90,13 +90,11 @@ describe('TextInput', () => {
   it('should render with transparent border when appearance is none', () => {
     render(makeTextInputFixture({ appearance: 'none' }))
 
-    // For some reason we were applying a border: 1px solid transparent style and then overriding it with
-    // the individual borderColor style, see https://github.com/segmentio/evergreen/issues/1581
     expect(screen.getByTestId('input')).toHaveStyle({
-      borderTop: '1px solid transparent',
-      borderBottom: '1px solid transparent',
-      borderLeft: '1px solid transparent',
-      borderRight: '1px solid transparent'
+      borderTopColor: 'transparent',
+      borderBottomColor: 'transparent',
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent'
     })
   })
 })
diff --git a/src/text-input/src/TextInput.js b/src/text-input/src/TextInput.js
@@ -15,7 +15,6 @@ const pseudoSelectors = {
 }
 
 const internalStyles = {
-  border: 'none',
   MozAppearance: 'none',
   outline: 'none',
   textDecoration: 'none',