Skip to content

chore(react-search-preview): migrate to new slots API #28862

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.

Sign up for GitHub

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

Merged
bsunderhus merged 1 commit into from
Aug 18, 2023
Merged

chore(react-search-preview): migrate to new slots API #28862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 7 additions & 0 deletions change/@fluentui-react-search-preview-36bce77d-7b10-45d8-99df-3c4c014bc2be.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Copy link
Contributor Author

@bsunderhus bsunderhus Aug 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@smhigley @khmakoto , can you verify the Visual Regressions?!

Copy link
Member

@khmakoto khmakoto Aug 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a comment on why I think we're seeing these regressions below.

"type": "patch",
"comment": "chore: migrate to new slots API",
"packageName": "@fluentui/react-search-preview",
"email": "[email protected]",
"dependentChangeType": "patch"
}
13 changes: 6 additions & 7 deletions packages/react-components/react-search-preview/etc/react-search-preview.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import { Input } from '@fluentui/react-input';
import { InputState } from '@fluentui/react-input';
import type { InputProps } from '@fluentui/react-input';
import type { InputSlots } from '@fluentui/react-input';
import type { InputState } from '@fluentui/react-input';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
Expand All @@ -25,17 +26,15 @@ export const SearchBox: ForwardRefComponent<SearchBoxProps>;
export const searchBoxClassNames: SlotClassNames<SearchBoxSlots>;

// @public
export type SearchBoxProps = ComponentProps<SearchBoxSlots>;
export type SearchBoxProps = Omit<ComponentProps<Partial<SearchBoxSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & InputProps;

// @public (undocumented)
export type SearchBoxSlots = {
root: NonNullable<Slot<typeof Input>>;
export type SearchBoxSlots = InputSlots & {
dismiss?: Slot<'span'>;
contentAfter?: Slot<'span'>;
};

// @public
export type SearchBoxState = ComponentState<SearchBoxSlots> & Required<Pick<InputState, 'size'>> & Required<Pick<SearchBoxProps, 'disabled'>> & {
export type SearchBoxState = ComponentState<SearchBoxSlots> & InputState & Required<Pick<InputState, 'size'>> & Required<Pick<SearchBoxProps, 'disabled'>> & {
focused: boolean;
};

Expand Down
18 changes: 9 additions & 9 deletions packages/react-components/react-search-preview/src/components/SearchBox/SearchBox.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import { Input, InputState } from '@fluentui/react-input';

export type SearchBoxSlots = {
// Root of the component, wrapping the inputs
root: NonNullable<Slot<typeof Input>>;
import type { InputProps, InputSlots, InputState } from '@fluentui/react-input';

export type SearchBoxSlots = InputSlots & {
// Last element in the input, within the input border
dismiss?: Slot<'span'>;

// Element after the input text, within the input border
contentAfter?: Slot<'span'>;
};

/**
* SearchBox Props
*/
export type SearchBoxProps = ComponentProps<SearchBoxSlots>;
export type SearchBoxProps = Omit<
ComponentProps<Partial<SearchBoxSlots>, 'input'>,
// `children` is unsupported. The rest of these native props have customized definitions.
'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'
> &
InputProps;

/**
* State used in rendering SearchBox
*/
export type SearchBoxState = ComponentState<SearchBoxSlots> &
InputState &
Required<Pick<InputState, 'size'>> &
Required<Pick<SearchBoxProps, 'disabled'>> & {
focused: boolean;
Expand Down
4 changes: 2 additions & 2 deletions ...nents/react-search-preview/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`SearchBox renders a default state 1`] = `
class="fui-Input fui-SearchBox"
>
<span
class="fui-Input__contentBefore"
class="fui-Input__contentBefore fui-SearchBox__contentBefore"
>
<svg
aria-hidden="true"
Expand All @@ -24,7 +24,7 @@ exports[`SearchBox renders a default state 1`] = `
</svg>
</span>
<input
class="fui-Input__input"
class="fui-Input__input fui-SearchBox__input"
type="search"
value=""
/>
Expand Down
31 changes: 14 additions & 17 deletions packages/react-components/react-search-preview/src/components/SearchBox/renderSearchBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,26 @@
/** @jsx createElement */
/** @jsxFrag React.Fragment */

import * as React from 'react';
import { createElement } from '@fluentui/react-jsx-runtime';
import { getSlotsNext } from '@fluentui/react-utilities';
import { assertSlots } from '@fluentui/react-utilities';
import type { SearchBoxState, SearchBoxSlots } from './SearchBox.types';

/**
* Render the final JSX of SearchBox
*/
export const renderSearchBox_unstable = (state: SearchBoxState) => {
const { slots, slotProps } = getSlotsNext<SearchBoxSlots>(state);
assertSlots<SearchBoxSlots>(state);

// TODO Add additional slots in the appropriate place
const rootSlots = {
contentAfter: slots.contentAfter && {
...slotProps.contentAfter,
children: (
<>
{slotProps.contentAfter.children}
{slots.dismiss && <slots.dismiss {...slotProps.dismiss} />}
</>
),
},
};

return <slots.root {...slotProps.root} {...rootSlots} />;
return (
<state.root>
{state.contentBefore && <state.contentBefore />}
<state.input />
{state.contentAfter && (
<state.contentAfter>
{state.contentAfter.children}
{state.dismiss && <state.dismiss />}
</state.contentAfter>
)}
</state.root>
);
};
81 changes: 46 additions & 35 deletions packages/react-components/react-search-preview/src/components/SearchBox/useSearchBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import * as React from 'react';
import {
isResolvedShorthand,
mergeCallbacks,
resolveShorthand,
slot,
useControllableState,
useEventCallback,
useMergedRefs,
} from '@fluentui/react-utilities';
import { Input, InputState } from '@fluentui/react-input';
import type { SearchBoxProps, SearchBoxState } from './SearchBox.types';
import { useInput_unstable } from '@fluentui/react-input';
import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
import type { ExtractSlotProps } from '@fluentui/react-utilities';
import type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox.types';

/**
* Create the state required to render SearchBox.
Expand Down Expand Up @@ -42,67 +44,76 @@ export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTML
setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));
});

const state: SearchBoxState = {
components: {
root: Input,
dismiss: 'span',
contentAfter: 'span',
},
const rootProps = slot.resolveShorthand(root);

root: {
ref: useMergedRefs(searchBoxRef, ref),
type: 'search',
input: {}, // defining here to have access in styles hook
const handleDismissClick = useEventCallback((event: React.MouseEvent<HTMLSpanElement>) => {
if (isResolvedShorthand(dismiss)) {
dismiss.onClick?.(event);
}
setValue('');
});

const inputState = useInput_unstable(
{
type: 'search',
disabled,
size,
value,

contentBefore: resolveShorthand(contentBefore, {
root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(
{
...rootProps,
ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),
onFocus: useEventCallback(mergeCallbacks(rootProps?.onFocus, onFocus)),
onBlur: useEventCallback(mergeCallbacks(rootProps?.onBlur, onBlur)),
},
{
elementType: 'span',
},
),
contentBefore: slot.optional(contentBefore, {
renderByDefault: true,
defaultProps: {
children: <SearchRegular />,
},
required: true, // TODO need to allow users to remove
elementType: 'span',
}),

...inputProps,

root: resolveShorthand(root, {
required: true,
contentAfter: slot.optional(contentAfter, {
renderByDefault: true,
elementType: 'span',
}),

...inputProps,
onChange: useEventCallback(ev => {
const newValue = ev.target.value;
props.onChange?.(ev, { value: newValue });
setValue(newValue);
}),
},
dismiss: resolveShorthand(dismiss, {
useMergedRefs(searchBoxRef, ref),
);

const state: SearchBoxState = {
...inputState,
components: {
...inputState.components,
dismiss: 'span',
},
dismiss: slot.optional(dismiss, {
defaultProps: {
children: <DismissRegular />,
role: 'button',
'aria-label': 'clear',
tabIndex: -1,
},
required: true,
}),
contentAfter: resolveShorthand(contentAfter, {
required: true,
renderByDefault: true,
elementType: 'span',
}),

disabled,
focused,
size,
};

const searchBoxRoot = state.root.root as InputState['root'];
searchBoxRoot.ref = useMergedRefs(searchBoxRoot.ref, searchBoxRootRef);
searchBoxRoot.onFocus = useEventCallback(mergeCallbacks(searchBoxRoot.onFocus, onFocus));
searchBoxRoot.onBlur = useEventCallback(mergeCallbacks(searchBoxRoot.onBlur, onBlur));

const onDismissClick = useEventCallback(mergeCallbacks(state.dismiss?.onClick, () => setValue('')));
if (state.dismiss) {
state.dismiss.onClick = onDismissClick;
state.dismiss.onClick = handleDismissClick;
}

return state;
Expand Down
11 changes: 10 additions & 1 deletion ...act-components/react-search-preview/src/components/SearchBox/useSearchBoxStyles.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
import type { SearchBoxSlots, SearchBoxState } from './SearchBox.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { tokens } from '@fluentui/react-theme';
import { useInputStyles_unstable } from '@fluentui/react-input';

export const searchBoxClassNames: SlotClassNames<SearchBoxSlots> = {
root: 'fui-SearchBox',
dismiss: 'fui-SearchBox__dismiss',
contentAfter: 'fui-SearchBox__contentAfter',
contentBefore: 'fui-SearchBox__contentBefore',
input: 'fui-SearchBox__input',
};

/**
Expand Down Expand Up @@ -98,7 +101,7 @@ export const useSearchBoxStyles_unstable = (state: SearchBoxState): SearchBoxSta
const dismissStyles = useDismissStyles();

state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], state.root.className);
state.root.input!.className = rootStyles.input;
state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, state.input.className);

if (state.dismiss) {
state.dismiss.className = mergeClasses(
Expand All @@ -111,6 +114,10 @@ export const useSearchBoxStyles_unstable = (state: SearchBoxState): SearchBoxSta
);
}

if (state.contentBefore) {
state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);
}

if (state.contentAfter) {
state.contentAfter.className = mergeClasses(
searchBoxClassNames.contentAfter,
Expand All @@ -124,5 +131,7 @@ export const useSearchBoxStyles_unstable = (state: SearchBoxState): SearchBoxSta
state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);
}

useInputStyles_unstable(state);

return state;
};