Skip to content

Commit

Permalink
Add style wrapper for SearchInput.
Browse files Browse the repository at this point in the history
  • Loading branch information
@aappoalander
aappoalander committed Jan 27, 2021
1 parent 4345119 commit 6050c40
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 132 deletions.
7 changes: 6 additions & 1 deletion src/core/Form/SearchInput/SearchInput.baseStyles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,16 @@ export const baseStyles = withSuomifiTheme(
({ theme }: TokensAndTheme) => css`
&.fi-search-input {
${font({ theme })('bodyText')}
display: inline-block;
width: 290px;
}
& .fi-search-input {
&_wrapper {
width: 100%;
min-width: 105px;
display: inline-block;
}
&_functionality-container {
position: relative;
}
Expand Down
122 changes: 64 additions & 58 deletions src/core/Form/SearchInput/SearchInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import classnames from 'classnames';
import {
HtmlInputWithRef,
HtmlInputProps,
HtmlSpan,
HtmlDiv,
HtmlDivProps,
HtmlButton,
Expand Down Expand Up @@ -85,6 +86,7 @@ const searchInputClassNames = {
fullWidth: `${baseClassName}--full-width`,
error: `${baseClassName}--error`,
notEmpty: `${baseClassName}--not-empty`,
styleWrapper: `${baseClassName}_wrapper`,
inputElement: `${baseClassName}_input`,
inputElementContainer: `${baseClassName}_input-element-container`,
functionalityContainer: `${baseClassName}_functionality-container`,
Expand Down Expand Up @@ -208,66 +210,70 @@ class BaseSearchInput extends Component<SearchInputProps> {
[searchInputClassNames.fullWidth]: fullWidth,
})}
>
<LabelText htmlFor={id} labelMode={labelMode} as="label">
{labelText}
</LabelText>
<Debounce waitFor={this.props.debounce}>
{(debouncer: Function, cancelDebounce: Function) => (
<HtmlDiv className={searchInputClassNames.functionalityContainer}>
<HtmlDiv className={searchInputClassNames.inputElementContainer}>
<HtmlInputWithRef
{...passProps}
{...getConditionalAriaProp('aria-describedby', [
!!statusText ? statusTextId : undefined,
ariaDescribedBy,
])}
forwardRef={this.inputRef}
aria-invalid={status === 'error'}
id={id}
className={searchInputClassNames.inputElement}
type="search"
role="searchbox"
value={this.state.value}
placeholder={visualPlaceholder}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
const eventValue = event.currentTarget.value;
conditionalSetState(eventValue);
if (propOnChange) {
debouncer(propOnChange, eventValue);
}
<HtmlSpan className={searchInputClassNames.styleWrapper}>
<LabelText htmlFor={id} labelMode={labelMode} as="label">
{labelText}
</LabelText>
<Debounce waitFor={this.props.debounce}>
{(debouncer: Function, cancelDebounce: Function) => (
<HtmlDiv className={searchInputClassNames.functionalityContainer}>
<HtmlDiv
className={searchInputClassNames.inputElementContainer}
>
<HtmlInputWithRef
{...passProps}
{...getConditionalAriaProp('aria-describedby', [
!!statusText ? statusTextId : undefined,
ariaDescribedBy,
])}
forwardRef={this.inputRef}
aria-invalid={status === 'error'}
id={id}
className={searchInputClassNames.inputElement}
type="search"
role="searchbox"
value={this.state.value}
placeholder={visualPlaceholder}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
const eventValue = event.currentTarget.value;
conditionalSetState(eventValue);
if (propOnChange) {
debouncer(propOnChange, eventValue);
}
}}
onKeyPress={onKeyPress}
onKeyDown={onKeyDown}
/>
</HtmlDiv>
<HtmlButton
{...clearButtonProps}
onClick={() => {
onClear();
cancelDebounce();
}}
onKeyPress={onKeyPress}
onKeyDown={onKeyDown}
/>
>
<VisuallyHidden>{clearButtonLabel}</VisuallyHidden>
<Icon
aria-hidden={true}
icon="close"
className={searchInputClassNames.clearIcon}
/>
</HtmlButton>
<HtmlButton {...searchButtonDerivedProps}>
<VisuallyHidden>{searchButtonLabel}</VisuallyHidden>
<Icon
aria-hidden={true}
icon="search"
className={searchInputClassNames.searchIcon}
/>
</HtmlButton>
</HtmlDiv>
<HtmlButton
{...clearButtonProps}
onClick={() => {
onClear();
cancelDebounce();
}}
>
<VisuallyHidden>{clearButtonLabel}</VisuallyHidden>
<Icon
aria-hidden={true}
icon="close"
className={searchInputClassNames.clearIcon}
/>
</HtmlButton>
<HtmlButton {...searchButtonDerivedProps}>
<VisuallyHidden>{searchButtonLabel}</VisuallyHidden>
<Icon
aria-hidden={true}
icon="search"
className={searchInputClassNames.searchIcon}
/>
</HtmlButton>
</HtmlDiv>
)}
</Debounce>
<StatusText id={statusTextId} status={status}>
{statusText}
</StatusText>
)}
</Debounce>
<StatusText id={statusTextId} status={status}>
{statusText}
</StatusText>
</HtmlSpan>
</HtmlDiv>
);
}
Expand Down
155 changes: 82 additions & 73 deletions src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ exports[`snapshot should have matching default structure 1`] = `
box-sizing: border-box;
}
.c3 {
.c2 {
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
Expand All @@ -140,8 +140,8 @@ exports[`snapshot should have matching default structure 1`] = `
white-space: normal;
}
.c3::before,
.c3::after {
.c2::before,
.c2::after {
box-sizing: border-box;
}
Expand All @@ -157,7 +157,7 @@ exports[`snapshot should have matching default structure 1`] = `
overflow: hidden;
}
.c2.fi-label-text .fi-label-text_label-span {
.c3.fi-label-text .fi-label-text_label-span {
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
-ms-letter-spacing: 0;
Expand All @@ -176,7 +176,7 @@ exports[`snapshot should have matching default structure 1`] = `
color: hsl(0,0%,16%);
}
.c2.fi-label-text .fi-label-text_label-span .fi-label-text_optionalText {
.c3.fi-label-text .fi-label-text_label-span .fi-label-text_optionalText {
font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
font-size: 16px;
line-height: 1.5;
Expand All @@ -202,10 +202,15 @@ exports[`snapshot should have matching default structure 1`] = `
font-size: 18px;
line-height: 1.5;
font-weight: 400;
display: inline-block;
width: 290px;
}
.c1 .fi-search-input_wrapper {
width: 100%;
min-width: 105px;
display: inline-block;
}
.c1 .fi-search-input_functionality-container {
position: relative;
}
Expand Down Expand Up @@ -460,82 +465,86 @@ exports[`snapshot should have matching default structure 1`] = `
<div
class="c0 c1 fi-search-input"
>
<label
class="c0 c2 fi-label-text"
for="1"
<span
class="c2 fi-search-input_wrapper"
>
<span
class="c3 fi-label-text_label-span"
>
Test search input
</span>
</label>
<div
class="c0 fi-search-input_functionality-container"
>
<div
class="c0 fi-search-input_input-element-container"
>
<input
aria-invalid="false"
class="c4 fi-search-input_input"
data-testid="searchinput"
id="1"
role="searchbox"
type="search"
value=""
/>
</div>
<button
aria-hidden="true"
class="c5 fi-search-input_button fi-search-input_button-clear"
tabindex="-1"
type="button"
<label
class="c0 c3 fi-label-text"
for="1"
>
<span
class="c3 c6 fi-visually-hidden"
class="c2 fi-label-text_label-span"
>
Clear
Test search input
</span>
<svg
aria-hidden="true"
class="fi-icon c7 fi-search-input_button-clear-icon"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 24 24"
width="1em"
</label>
<div
class="c0 fi-search-input_functionality-container"
>
<div
class="c0 fi-search-input_input-element-container"
>
<path
d="M12 13.45L4.75 20.7a1.026 1.026 0 01-1.45-1.45L10.55 12 3.3 4.75A1.026 1.026 0 014.75 3.3L12 10.55l7.25-7.25a1.026 1.026 0 011.45 1.45L13.45 12l7.25 7.25a1.026 1.026 0 01-1.45 1.45L12 13.45z"
<input
aria-invalid="false"
class="c4 fi-search-input_input"
data-testid="searchinput"
id="1"
role="searchbox"
type="search"
value=""
/>
</svg>
</button>
<button
aria-hidden="true"
class="c5 fi-search-input_button fi-search-input_button-search"
tabindex="-1"
type="button"
>
<span
class="c3 c6 fi-visually-hidden"
</div>
<button
aria-hidden="true"
class="c5 fi-search-input_button fi-search-input_button-clear"
tabindex="-1"
type="button"
>
Search
</span>
<svg
<span
class="c2 c6 fi-visually-hidden"
>
Clear
</span>
<svg
aria-hidden="true"
class="fi-icon c7 fi-search-input_button-clear-icon"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M12 13.45L4.75 20.7a1.026 1.026 0 01-1.45-1.45L10.55 12 3.3 4.75A1.026 1.026 0 014.75 3.3L12 10.55l7.25-7.25a1.026 1.026 0 011.45 1.45L13.45 12l7.25 7.25a1.026 1.026 0 01-1.45 1.45L12 13.45z"
/>
</svg>
</button>
<button
aria-hidden="true"
class="fi-icon c7 fi-search-input_button-search-icon"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 24 24"
width="1em"
class="c5 fi-search-input_button fi-search-input_button-search"
tabindex="-1"
type="button"
>
<path
d="M9 2C5.14 2 2 5.141 2 9.001 2 12.86 5.14 16 9 16s7-3.14 7-6.999C16 5.141 12.86 2 9 2m7.029 12.615l7.678 7.678a.999.999 0 11-1.414 1.414l-7.678-7.678A8.957 8.957 0 019 18c-4.962 0-9-4.037-9-8.999C0 4.038 4.038 0 9 0s9 4.038 9 9.001a8.955 8.955 0 01-1.971 5.614z"
/>
</svg>
</button>
</div>
<span
class="c2 c6 fi-visually-hidden"
>
Search
</span>
<svg
aria-hidden="true"
class="fi-icon c7 fi-search-input_button-search-icon"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 24 24"
width="1em"
>
<path
d="M9 2C5.14 2 2 5.141 2 9.001 2 12.86 5.14 16 9 16s7-3.14 7-6.999C16 5.141 12.86 2 9 2m7.029 12.615l7.678 7.678a.999.999 0 11-1.414 1.414l-7.678-7.678A8.957 8.957 0 019 18c-4.962 0-9-4.037-9-8.999C0 4.038 4.038 0 9 0s9 4.038 9 9.001a8.955 8.955 0 01-1.971 5.614z"
/>
</svg>
</button>
</div>
</span>
</div>
`;

0 comments on commit 6050c40

Please sign in to comment.