From 47ba15c1e68ca494f6ab940bb4ef2cc6d589e21c Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 13 Sep 2022 15:05:46 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20`Search`=20to?= =?UTF-8?q?=20use=20new=20`InputWrapper`=20(#2481)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ♻️ Initial rewrite of Search * ♻️ Re-introduce height on input due to compact * 📝 Updated search docs * ♻️ Introduces Inputwrapper * ✅ Updated test * 🐛 Fixed bugs * 🗑️ Clean code * Updated snapshots * 🔥 Removed unused files --- .../src/components/Input/Input.tsx | 1 + .../Input/__snapshots__/Input.test.tsx.snap | 1 + .../src/components/Search/Search.docs.mdx | 29 +- .../src/components/Search/Search.stories.tsx | 137 ++------ .../src/components/Search/Search.test.tsx | 49 +-- .../src/components/Search/Search.tokens.ts | 93 ----- .../src/components/Search/Search.tsx | 323 +++--------------- .../Search/__snapshots__/Search.test.tsx.snap | 309 +++-------------- .../__snapshots__/SingleSelect.test.tsx.snap | 1 + .../__snapshots__/TextField.test.tsx.snap | 1 + 10 files changed, 171 insertions(+), 773 deletions(-) delete mode 100644 packages/eds-core-react/src/components/Search/Search.tokens.ts diff --git a/packages/eds-core-react/src/components/Input/Input.tsx b/packages/eds-core-react/src/components/Input/Input.tsx index 6fbb3928fa..42ae4f9de3 100644 --- a/packages/eds-core-react/src/components/Input/Input.tsx +++ b/packages/eds-core-react/src/components/Input/Input.tsx @@ -29,6 +29,7 @@ const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => { --eds-input-color: ${token.typography.color}; position: relative; + height: ${token.height}; width: ${token.width}; display: flex; flex-direction: row; diff --git a/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap index b96d23e454..2befe8540d 100644 --- a/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap +++ b/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap @@ -6,6 +6,7 @@ exports[`Input Matches snapshot 1`] = ` --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1)); position: relative; + height: 36px; width: 100%; display: -webkit-box; display: -webkit-flex; diff --git a/packages/eds-core-react/src/components/Search/Search.docs.mdx b/packages/eds-core-react/src/components/Search/Search.docs.mdx index 4d090268a7..b0db598ce9 100644 --- a/packages/eds-core-react/src/components/Search/Search.docs.mdx +++ b/packages/eds-core-react/src/components/Search/Search.docs.mdx @@ -20,35 +20,22 @@ Allows users to locate or refine content based on simple words or phrases. `Search` can be used as a primary way of discovering content. - - ```tsx import { Search } from '@equinor/eds-core-react' - +
+ + ``` -## Examples - -### With `onFocus` and `onBlur` - - +## Accessibility -### With predefined value +* Use either a `label` or `aria-label` for description of whats being searched +* `Search` should be used inside a `form` - + -### Centered and styled - - - -### Inside a form element - - +## Examples ### Disabled diff --git a/packages/eds-core-react/src/components/Search/Search.stories.tsx b/packages/eds-core-react/src/components/Search/Search.stories.tsx index 2efe58a0fa..a6d5117644 100644 --- a/packages/eds-core-react/src/components/Search/Search.stories.tsx +++ b/packages/eds-core-react/src/components/Search/Search.stories.tsx @@ -1,40 +1,9 @@ import { useState, useEffect } from 'react' import { action } from '@storybook/addon-actions' -import styled from 'styled-components' -import { - Search, - Typography, - Button, - SearchProps, - EdsProvider, - Density, -} from '../..' +import { Search, Button, SearchProps, EdsProvider, Density } from '../..' import { Story, ComponentMeta } from '@storybook/react' import page from './Search.docs.mdx' -const Columns = styled.div` - display: grid; - width: 100%; - grid-gap: 16px; - grid-auto-flow: column; - grid-auto-columns: max-content; -` - -const Wrapper = styled.div` - background: lightblue; - padding: 8px; - width: 50%; - height: 100px; - display: flex; - align-items: center; - justify-content: center; -` - -const StyledSearch = styled(Search)` - width: 50%; - margin-left: 32px; -` - export default { title: 'Inputs/Search', component: Search, @@ -46,8 +15,6 @@ export default { } as ComponentMeta const handleOnChange = action('onChange') -const handleOnBlur = action('onBlur') -const handleOnFocus = action('onFocus') export const Introduction: Story = () => { // This story is not interactive, because Search has no props beyond the default HTML ones. @@ -61,80 +28,21 @@ export const Introduction: Story = () => { ) } -export const WithOnFocusAndBlur: Story = () => { - const [isFocused, setIsFocused] = useState(false) - - const handleFocus = () => { - setIsFocused(true) - handleOnFocus() - } - - const handleBlur = () => { - setIsFocused(false) - handleOnBlur() - } - - return ( -
- - I am connected to the search input - - -
- ) -} -WithOnFocusAndBlur.storyName = 'With on focus and blur' - -export const WithPredefinedValue: Story = () => ( - -) -WithPredefinedValue.storyName = 'With predefined value' - -export const CenteredAndStyled: Story = () => ( - - 50% width - = () => ( +
+ - -) -CenteredAndStyled.storyName = 'Centered and styled' - -export const InsideAForm: Story = () => ( - - ) -InsideAForm.storyName = 'Inside a form element' export const Disabled: Story = () => ( ) @@ -152,24 +60,21 @@ export const Controlled: Story = () => { return ( <> - Value: {searchValue} - - - - + + ) } @@ -185,7 +90,7 @@ export const Compact: Story = () => { return ( { const { getComputedStyle } = window window.getComputedStyle = (elt) => getComputedStyle(elt) - const { container } = render() + const { container } = render( + , + ) await act(async () => { const result = await axe(container) expect(result).toHaveNoViolations() @@ -37,11 +39,11 @@ describe('Search', () => { it('Has rendered provided value in input field', () => { const value = 'provided value' - render() + render() - const searchBox = screen.queryByRole('searchbox') + const searchInput = screen.getByTestId('search') - expect(searchBox).toHaveValue(value) + expect(searchInput).toHaveValue(value) }) it('Has called onChange once with event & new value, when value is changed', () => { const searchId = 'search-id-when-testing' @@ -54,11 +56,16 @@ describe('Search', () => { }) render( - , + , ) - const searchBox = screen.queryByRole('searchbox') + const searchInput = screen.queryByTestId('search') - fireEvent.change(searchBox, { + fireEvent.change(searchInput, { target: { value: newValue }, }) @@ -81,15 +88,15 @@ describe('Search', () => { id={searchId} defaultValue="initial value" onChange={handleOnChange} + data-testid="search" />, ) const clearButton = screen.queryByRole('button') - const searchBox = screen.queryByRole('searchbox') - + const searchInput = screen.queryByTestId('search') fireEvent.click(clearButton) expect(handleOnChange).toHaveBeenCalled() - expect(searchBox).toHaveValue('') + expect(searchInput).toHaveValue('') expect(callbackValue).toEqual('') expect(callbackId).toEqual(searchId) }) @@ -101,10 +108,12 @@ describe('Search', () => { callbackId = id as string }) - render() - const searchBox = screen.queryByRole('searchbox') + render( + , + ) + const searchInput = screen.queryByTestId('search') - fireEvent.focus(searchBox) + fireEvent.focus(searchInput) expect(handleOnFocus).toHaveBeenCalled() expect(callbackId).toEqual(searchId) @@ -116,22 +125,22 @@ describe('Search', () => { callbackId = id as string }) - render() - const searchBox = screen.queryByRole('searchbox') + render() + const searchInput = screen.queryByTestId('search') - fireEvent.blur(searchBox) + fireEvent.blur(searchInput) expect(handleOnBlur).toHaveBeenCalled() expect(callbackId).toEqual(searchId) }) it('Has new value, when value property is changed after first render', () => { - const { rerender } = render() + const { rerender } = render() - rerender() + rerender() - const searchBox: HTMLInputElement = screen.queryByRole('searchbox') + const searchInput: HTMLInputElement = screen.queryByTestId('search-new') - expect(searchBox.value).toEqual('new') + expect(searchInput.value).toEqual('new') }) }) diff --git a/packages/eds-core-react/src/components/Search/Search.tokens.ts b/packages/eds-core-react/src/components/Search/Search.tokens.ts deleted file mode 100644 index 5e7c414b0b..0000000000 --- a/packages/eds-core-react/src/components/Search/Search.tokens.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { tokens } from '@equinor/eds-tokens' -import type { ComponentToken } from '@equinor/eds-tokens' - -const { - colors: { - ui: { - background__light: { rgba: background }, - }, - interactive: { - primary__hover_alt: { rgba: primaryHoverAlt }, - primary__resting: { rgba: primaryColor }, - }, - text: { - static_icons__tertiary: { rgba: placeholderColor }, - }, - }, - spacings: { - comfortable: { small }, - }, - typography: { - input: { text: typography }, - }, - shape, -} = tokens - -type SearchToken = ComponentToken - -export const search: SearchToken = { - background, - typography, - height: '36px', - clickbound: { - offset: { top: '6px' }, - height: '48px', - }, - spacings: { - left: small, - right: small, - }, - border: { - type: 'border', - width: '1px', - style: 'solid', - color: 'transparent', - }, - states: { - focus: { - border: { - type: 'border', - width: '1px', - style: 'solid', - color: primaryColor, - }, - }, - }, - entities: { - placeholder: { - typography: { - color: placeholderColor, - }, - }, - icon: { - typography: { - color: placeholderColor, - }, - border: { - type: 'border', - radius: '50%', - }, - states: { - hover: { - background: primaryHoverAlt, - }, - }, - clickbound: { - offset: { top: '6px' }, - height: '36px', - }, - }, - button: { - height: '24px', - width: '24px', - spacings: { - right: small, - }, - }, - }, - modes: { - compact: { - height: shape._modes.compact.straight.minHeight, - }, - }, -} diff --git a/packages/eds-core-react/src/components/Search/Search.tsx b/packages/eds-core-react/src/components/Search/Search.tsx index 0678a6d128..247b45a0e2 100644 --- a/packages/eds-core-react/src/components/Search/Search.tsx +++ b/packages/eds-core-react/src/components/Search/Search.tsx @@ -1,313 +1,98 @@ import { useState, useRef, - useEffect, InputHTMLAttributes, - RefAttributes, forwardRef, useMemo, + ChangeEvent, + useEffect, } from 'react' -import styled, { css, ThemeProvider } from 'styled-components' +import styled from 'styled-components' import { search, close } from '@equinor/eds-icons' -import { search as searchToken } from './Search.tokens' -import { useEds } from '../EdsProvider' import { Button } from '../Button' import { Icon } from '../Icon' import { Input } from '../Input' -import { - spacingsTemplate, - typographyTemplate, - setReactInputValue, - bordersTemplate, - mergeRefs, - useToken, -} from '@equinor/eds-utils' - -type ContainerProps = { - isFocused: boolean - disabled: boolean -} - -const Container = styled.span( - ({ disabled, isFocused, theme }) => { - const { - height, - spacings, - background, - border, - clickbound, - entities: { icon, placeholder }, - states, - } = theme - - return css` - position: relative; - background: ${background}; - width: 100%; - height: ${height}; - display: grid; - grid-gap: 8px; - grid-auto-flow: column; - grid-auto-columns: max-content auto max-content; - align-items: center; - box-sizing: border-box; - ${bordersTemplate(border)} - z-index: 0; - - svg { - fill: ${icon.typography.color}; - } - - ${spacingsTemplate(spacings)} - - ${isFocused && bordersTemplate(states.focus.border)} - - - &::placeholder { - color: ${placeholder.typography.color}; - } - ${disabled - ? css` - cursor: not-allowed; - ` - : css` - @media (hover: hover) and (pointer: fine) { - &:hover { - ${bordersTemplate(states.focus.border)} - cursor: text; - } - } - `} +import { InputWrapper } from '../InputWrapper' +import { setReactInputValue, mergeRefs } from '@equinor/eds-utils' - &::after { - z-index: -1; - position: absolute; - top: -${clickbound.offset}; - left: 0; - width: 100%; - height: ${clickbound.height}; - content: ''; - } - - &::before { - position: absolute; - top: 0; - left: 0; - width: auto; - min-height: auto; - content: ''; - } - ` - }, -) - -const SearchInput = styled(Input)(({ theme, disabled }) => { - return css` - height: calc(${theme.height} - 2px); - align-self: start; - box-shadow: unset; +const SearchInput = styled(Input)` + input { &[type='search']::-webkit-search-decoration, &[type='search']::-webkit-search-cancel-button, &[type='search']::-webkit-search-results-button, &[type='search']::-webkit-search-results-decoration { -webkit-appearance: none; } + } +` - ${typographyTemplate(theme.typography)} - - &:focus { - outline: none; - } - &:-webkit-autofill { - box-shadow: 0 0 0px 1000px ${theme.background} inset; - } - &:autofill { - box-shadow: 0 0 0px 1000px ${theme.background} inset; - } - ${disabled && - css` - cursor: not-allowed; - `} - ` -}) - -type InsideButtonProps = { - isActive: boolean -} - -const InsideButton = styled(Button)( - ({ theme, isActive }) => { - const { - entities: { button }, - } = theme - - return css` - visibility: hidden; - position: absolute; - right: ${button.spacings.right}; - height: ${button.height}; - width: ${button.width}; - - ${isActive && - css` - visibility: visible; - `} - ` - }, -) - -type ControlledSearch = ( - props: SearchProps & RefAttributes, - value: SearchProps['value'], - defaultValue: SearchProps['defaultValue'], -) => SearchProps & RefAttributes +const InsideButton = styled(Button)` + height: 24px; + width: 24px; +` export type SearchProps = InputHTMLAttributes export const Search = forwardRef(function Search( - { - onChange, - defaultValue = '', - value, - className = '', - style, - disabled = false, - onBlur, - onFocus, - ...rest - }, + { onChange, style, className, ...rest }, ref, ) { - const { density } = useEds() - const token = useToken({ density }, searchToken) - - const isControlled = typeof value !== 'undefined' - const isActive = (isControlled && value !== '') || defaultValue !== '' const inputRef = useRef(null) - - const [state, setState] = useState({ - isActive, - isFocused: false, - }) + const [showClear, setShowClear] = useState(Boolean(rest.defaultValue)) useEffect(() => { - setState((prevState) => ({ ...prevState, isActive })) - }, [value, defaultValue, isActive]) - - const handleOnClick = () => { - const inputEl = inputRef.current - inputEl.focus() - } - const handleFocus = () => - setState((prevState) => ({ ...prevState, isFocused: true })) - const handleBlur = () => - setState((prevState) => ({ ...prevState, isFocused: false })) - const handleOnChange = (event: React.ChangeEvent) => { - setIsActive((event.target as HTMLInputElement).value) - } + if (rest.value) { + setShowClear(Boolean(rest.value)) + } + }, [rest.value]) - const handleOnDelete = () => { + const clearInputValue = () => { const input = inputRef.current const clearedValue = '' setReactInputValue(input, clearedValue) - setState((prevState) => ({ ...prevState, isActive: false })) } - const setIsActive = (newValue: string) => - setState((prevState) => ({ ...prevState, isActive: newValue !== '' })) - /** Applying props for controlled vs. uncontrolled scnarios */ - const applyControllingProps: ControlledSearch = ( - props, - value, - defaultValue, - ): SearchProps => { - if (isControlled) { - return { - ...props, - value, - } - } - - return { - ...props, - defaultValue, - } + const handleOnChange = (e: ChangeEvent) => { + setShowClear(Boolean(e.currentTarget.value)) } - const { isFocused } = state - const size = 24 - - const containerProps = { - isFocused, - className, - style, - disabled, - role: 'search', - 'aria-label': rest['aria-label'], - onClick: handleOnClick, - } const combinedRef = useMemo( () => mergeRefs(inputRef, ref), [inputRef, ref], ) - const inputProps = applyControllingProps( - { - ...rest, - disabled, - ref: combinedRef, - type: 'search', - role: 'searchbox', - 'aria-label': 'search input', - onBlur: (e) => { - handleBlur() - if (onBlur) { - onBlur(e) - } - }, - onFocus: (e) => { - handleFocus() - if (onFocus) { - onFocus(e) - } - }, - onChange: (e) => { - handleOnChange(e) - if (onChange) { - onChange(e) - } - }, - }, - value, - defaultValue, - ) - - const clearButtonProps = { - isActive: state.isActive, - onClick: (e: React.MouseEvent) => { - e.stopPropagation() - if (state.isActive) { - handleOnDelete() - } - }, - } - return ( - - - - - - - - - + + ) => { + handleOnChange(e) + if (onChange) { + onChange(e) + } + }} + ref={combinedRef} + leftAdornmentsWidth={24 + 8} + leftAdornments={} + rightAdornmentsWidth={24 + 8} + rightAdornments={ + <> + {showClear && ( + ) => { + e.stopPropagation() + clearInputValue() + }} + > + + + )} + + } + {...rest} + /> + ) }) - -// Search.displayName = 'eds-search' diff --git a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap index f454e1a98f..eb212f7088 100644 --- a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap +++ b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap @@ -2,110 +2,11 @@ exports[`Search Matches snapshot 1`] = ` - .c6 { - display: grid; - grid-gap: var(--eds_button__gap,8px); - grid-auto-flow: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c6 > :is(svg,img) { - margin-top: var(--eds_button__icon__margin_y,0); - margin-bottom: var(--eds_button__icon__margin_y,0); -} - -.c4 { - box-sizing: border-box; - margin: 0; - padding: 0; - -webkit-text-decoration: none; - text-decoration: none; - position: relative; - cursor: pointer; - display: inline-block; - background: transparent; - height: 40px; - width: 40px; - padding-left: 0; - padding-top: var(--eds_button__padding_y,0); - padding-right: 0; - padding-bottom: var(--eds_button__padding_y,0); - border: 0px solid transparent; - border-radius: 50%; - margin: 0; - color: var(--eds_interactive_primary__resting,rgba(0,112,121,1)); - font-family: Equinor; - font-size: var(--eds_button__font_size,0.875rem); - font-weight: 500; - line-height: 1.143em; - text-align: center; -} - -.c4 svg { - justify-self: center; -} - -.c4::before { - position: absolute; - top: 0; - left: 0; - width: auto; - min-height: auto; - content: ''; -} - -.c4::after { - position: absolute; - top: -0; - left: -4px; - width: 48px; - height: 48px; - content: ''; -} - -.c4:focus { - outline: none; -} - -.c4[data-focus-visible-added]:focus { - outline: 2px dashed rgba(0,112,121,1); - outline-offset: -2px; -} - -.c4:focus-visible { - outline: 2px dashed rgba(0,112,121,1); - outline-offset: -2px; -} - -.c4::-moz-focus-inner { - border: 0; -} - -.c4:disabled { - cursor: not-allowed; - background: transparent; - border: 1px solid transparent; - margin: 0; - color: var(--eds_interactive__disabled__text,rgba(190,190,190,1)); - font-family: Equinor; - font-size: 0.875rem; - font-weight: 500; - line-height: 1.143em; - text-align: center; -} - -.c1 { + .c0 { --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1)); position: relative; + height: 36px; width: 100%; display: -webkit-box; display: -webkit-flex; @@ -122,19 +23,19 @@ exports[`Search Matches snapshot 1`] = ` outline-offset: 0px; } -.c1:focus-within { +.c0:focus-within { box-shadow: none; outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1)); outline-offset: 0px; } -.c3 { +.c4 { width: 100%; border: none; background: transparent; - padding-left: 8px; + padding-left: 40px; padding-top: 6px; - padding-right: 8px; + padding-right: 40px; padding-bottom: 6px; font-family: Equinor; font-size: 1.000rem; @@ -145,107 +46,48 @@ exports[`Search Matches snapshot 1`] = ` letter-spacing: 0.025em; line-height: 1.500em; outline: none; - padding-left: 8px; - padding-right: 8px; + padding-left: 40px; + padding-right: 40px; } -.c3::-webkit-input-placeholder { +.c4::-webkit-input-placeholder { color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); } -.c3::-moz-placeholder { +.c4::-moz-placeholder { color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); } -.c3:-ms-input-placeholder { +.c4:-ms-input-placeholder { color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); } -.c3::placeholder { +.c4::placeholder { color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); } -.c3:disabled { +.c4:disabled { color: var(--eds-input-color); cursor: not-allowed; } -.c0 { - position: relative; - background: var(--eds_ui_background__light,rgba(247,247,247,1)); - width: 100%; - height: 36px; - display: grid; - grid-gap: 8px; - grid-auto-flow: column; - grid-auto-columns: max-content auto max-content; +.c2 { + position: absolute; + top: 6px; + bottom: 6px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - box-sizing: border-box; - border: 1px solid transparent; - z-index: 0; - padding-left: 8px; - padding-right: 8px; -} - -.c0 svg { - fill: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); -} - -.c0::-webkit-input-placeholder { - color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); -} - -.c0::-moz-placeholder { - color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); -} - -.c0:-ms-input-placeholder { - color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); -} - -.c0::placeholder { - color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); -} - -.c0::after { - z-index: -1; - position: absolute; - top: -top:6px; - left: 0; - width: 100%; - height: 48px; - content: ''; -} - -.c0::before { - position: absolute; - top: 0; - left: 0; - width: auto; - min-height: auto; - content: ''; -} - -.c2 { - height: calc(36px - 2px); - -webkit-align-self: start; - -ms-flex-item-align: start; - align-self: start; - box-shadow: unset; - margin: 0; - color: rgba(0,0,0,1); font-family: Equinor; - font-size: 1.000rem; - font-weight: 400; - line-height: 1.500em; - -webkit-letter-spacing: 0.025em; - -moz-letter-spacing: 0.025em; - -ms-letter-spacing: 0.025em; - letter-spacing: 0.025em; - text-align: left; + font-size: 0.750rem; + font-weight: 500; + line-height: 1.333em; + color: var(--eds-input-adornment-color); } .c2[type='search']::-webkit-search-decoration,.c2[type='search']::-webkit-search-cancel-button,.c2[type='search']::-webkit-search-results-button,.c2[type='search']::-webkit-search-results-decoration { @@ -262,102 +104,61 @@ exports[`Search Matches snapshot 1`] = ` .c2:autofill { box-shadow: 0 0 0px 1000px var(--eds_ui_background__light,rgba(247,247,247,1)) inset; +.c3 { + left: 0; + padding-left: 8px; } .c5 { - visibility: hidden; - position: absolute; - right: 8px; - height: 24px; - width: 24px; -} - -@media (hover:hover) and (pointer:fine) { - .c4:hover { - background: var(--eds_interactive_primary__hover_alt,rgba(222,237,238,1)); - border: 0px solid transparent; - border-radius: 50%; - } -} - -@media (hover:hover) and (pointer:fine) { - .c4:disabled:hover { - background: transparent; - } + right: 0; + padding-right: 8px; } -@media (hover:hover) and (pointer:fine) { - .c0:hover { - border: 1px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1)); - cursor: text; - } +.c1 input[type='search']::-webkit-search-decoration, +.c1 input[type='search']::-webkit-search-cancel-button, +.c1 input[type='search']::-webkit-search-results-button, +.c1 input[type='search']::-webkit-search-results-decoration { + -webkit-appearance: none; } - -
- -
- - + + +
+
+ `; diff --git a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap index 031c5628fe..3a382bba76 100644 --- a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap +++ b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap @@ -32,6 +32,7 @@ exports[`SingleSelect Matches snapshot 1`] = ` --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1)); position: relative; + height: 36px; width: 100%; display: -webkit-box; display: -webkit-flex; diff --git a/packages/eds-core-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/eds-core-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap index 2a051190ac..338b2e2d8a 100644 --- a/packages/eds-core-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap +++ b/packages/eds-core-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap @@ -37,6 +37,7 @@ exports[`TextField Matches snapshot 1`] = ` --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1)); --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1)); position: relative; + height: 36px; width: 100%; display: -webkit-box; display: -webkit-flex;