= () => {
- 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 9bb5289b28..637c370ffd 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,222 +46,105 @@ 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;
-}
-
-.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 {
- -webkit-appearance: none;
-}
-
-.c2:focus {
- outline: none;
-}
-
-.c2:-webkit-autofill {
- box-shadow: 0 0 0px 1000px var(--eds_ui_background__light,rgba(247,247,247,1)) inset;
+ font-size: 0.750rem;
+ font-weight: 500;
+ line-height: 1.333em;
+ color: var(--eds-input-adornment-color);
}
-.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;