Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SearchControl: refactor to use InputControl internally #56524

Merged
merged 36 commits into from
Feb 8, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
0cbc074
WIP
ciampo Nov 25, 2023
bb34bad
Merge branch 'trunk' into refactor/search-control-input-control
mirka Dec 27, 2023
fcf93e8
Confirm label working as expected
mirka Dec 27, 2023
a59328f
Simplify id
mirka Dec 27, 2023
91c0399
Simplify props
mirka Dec 27, 2023
1c3e0a1
Fix types
mirka Dec 27, 2023
58952b2
Add `__nextHasNoMarginBottom` back compat
mirka Dec 27, 2023
1b56b19
Add RTL todo
mirka Dec 27, 2023
c7bdd22
Add CSS classes
mirka Dec 28, 2023
2863577
Adjust prefix/suffix
mirka Dec 28, 2023
c10bb7a
Add empty string fallback to `value`
mirka Dec 28, 2023
57d1b5e
Add placeholder
mirka Dec 28, 2023
a2e6f71
Reset webkit styles
mirka Dec 28, 2023
44616b7
Restore original onChange type signature
mirka Dec 28, 2023
2933784
Merge branch 'trunk' into refactor/search-control-input-control
mirka Jan 19, 2024
f579ab6
Make 40px by default
mirka Jan 19, 2024
63851ec
Support compact size
mirka Jan 19, 2024
061474c
Adjust inner padding
mirka Jan 19, 2024
619df49
Adjust close button size
mirka Jan 19, 2024
0c845c0
Remove stylesheet
mirka Jan 19, 2024
26efc70
Tweak JSDocs
mirka Jan 19, 2024
e078c86
Add default label
mirka Jan 19, 2024
0ac7a31
Tweak story
mirka Jan 19, 2024
785bd56
Clean up
mirka Jan 19, 2024
baf8f3c
Update docs
mirka Jan 19, 2024
93a2b4c
Purify SuffixItem
mirka Feb 5, 2024
552175b
Tighten icon margins
mirka Feb 5, 2024
3c3797c
Merge branch 'trunk' into refactor/search-control-input-control
mirka Feb 5, 2024
e91440c
Support borderless gray
mirka Feb 6, 2024
9c18f1e
Restore original icon layout
mirka Feb 6, 2024
cf5bb5c
Merge branch 'trunk' into refactor/search-control-input-control
mirka Feb 7, 2024
aa2d573
Programatically remove any potential `disabled` prop
mirka Feb 7, 2024
62b49c0
Align `value` fallback to null coalesce
mirka Feb 8, 2024
5247c85
Add GH handle for design team
mirka Feb 8, 2024
377cb5c
Add changelog
mirka Feb 8, 2024
adb0b1f
Update SearchControl consumers (#58014)
mirka Feb 8, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Adjust prefix/suffix
  • Loading branch information
mirka committed Dec 28, 2023
commit 28635771e257c00ba4147f7ca0ee9e1b49298e2d
51 changes: 21 additions & 30 deletions packages/components/src/search-control/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ import { forwardRef, useMemo, useRef } from '@wordpress/element';
*/
import Button from '../button';
import InputControl from '../input-control';
import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
import type { WordPressComponentProps } from '../context/wordpress-component';
import type { SearchControlProps } from './types';
import type { ForwardedRef } from 'react';
import { ContextSystemProvider } from '../context';
import { SearchIconWrapper } from './styles';

function UnforwardedSearchControl(
{
Expand All @@ -43,35 +43,25 @@ function UnforwardedSearchControl(
'components-search-control'
);

const renderRightButton = () => {
if ( onClose ) {
return (
<Button
__next40pxDefaultSize={ __next40pxDefaultSize }
icon={ closeSmall }
label={ __( 'Close search' ) }
onClick={ onClose }
size={ size }
/>
);
const SuffixItem = () => {
ciampo marked this conversation as resolved.
Show resolved Hide resolved
if ( ! onClose && ! value ) {
return null;
}

if ( !! value ) {
return (
<Button
__next40pxDefaultSize={ __next40pxDefaultSize }
icon={ closeSmall }
label={ __( 'Reset search' ) }
onClick={ () => {
onChange( '' );
searchRef.current?.focus();
} }
size={ size }
/>
);
}
const onReset = () => {
onChange( '' );
searchRef.current?.focus();
};

return <Icon icon={ search } />;
return (
<Button
__next40pxDefaultSize={ __next40pxDefaultSize }
size={ size }
icon={ closeSmall }
label={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }
onClick={ onClose ?? onReset }
/>
);
};

// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
Expand Down Expand Up @@ -105,10 +95,11 @@ function UnforwardedSearchControl(
autoComplete="off"
value={ value }
prefix={
<InputControlPrefixWrapper>
{ renderRightButton() }
</InputControlPrefixWrapper>
<SearchIconWrapper size={ size }>
<Icon icon={ search } />
</SearchIconWrapper>
}
suffix={ <SuffixItem /> }
{ ...restProps }
/>
</ContextSystemProvider>
Expand Down
21 changes: 21 additions & 0 deletions packages/components/src/search-control/styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* External dependencies
*/
import styled from '@emotion/styled';

/**
* Internal dependencies
*/
import { space } from '../utils/space';
import type { SearchControlProps } from './types';

const horizontalPadding = ( {
size,
}: Required< Pick< SearchControlProps, 'size' > > ) => {
return space( size === 'compact' ? 1 : 2 );
};

export const SearchIconWrapper = styled.div`
display: flex;
padding: 0 ${ horizontalPadding };
`;