Skip to content

Commit

Permalink
Update upgrade guide
Browse files Browse the repository at this point in the history
  • Loading branch information
NicholasBoll committed Oct 14, 2024
1 parent bd38244 commit 192a7c1
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 8 deletions.
30 changes: 29 additions & 1 deletion modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,34 @@ component composing them.
</Combobox>

// Better - create a specialized component
const useMyComboboxInput = composeHooks(
// or your own model that extends `useComboboxModel`
createElemPropsHook(useComboboxModel)(model => {
return {
// anything you need your input to do
}
}),
useComboboxInputArbitrary,
useComboboxInput
)

const MyComboboxInput = createSubcomponent(TextInput)({
// or your own model that extends `useComboboxModel`
modelHook: useComboboxModel,
elemPropsHook: useMyComboboxInput,
})((elemProps, Element) => {
// return a TextInput
return <Element {...elemProps} />

// return an InputGroupgs
return (
<InputGroup>
<InputGroup.InnerStart>{/* Icon or something */}</InputGroup.InnerStart>
<InputGroup.Input as={Element} {...elemProps} />
<InputGroup.InnerEnd><InputGroup.ClearButton /></InputGroup.InnerEnd>
</InputGroup>
)
})
```

### Form Field
Expand Down Expand Up @@ -537,7 +565,7 @@ const theme: PartialEmotionCanvasTheme = {
```

`Select` has been refactored to use `useComboboxInputConstrained` to sync the model and the `input`
element regardless of the source. This makes the `Select` be a controllable component.
element regardless of the source. This makes the `Select` a controllable component.

### Text Area

Expand Down
15 changes: 8 additions & 7 deletions modules/react/combobox/stories/Combobox.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,14 @@ pick from these values, but cannot input a value outside the options provided. C
comboboxes use the [useComboboxInputConstrained](#usecomboboxinputconstrained) hook and often have
two separate `input` elements.

- user input - This is the visible input. It should contain user-friend values. Calls to `.focus()`
or `.blur()` are redirected to this input. Any prop passed to the `*.Input` component that is not
directly related to forms will be passed here (i.e. `data-testid`, `aria-*`, etc).
- form input - This input is only visible to forms. The `value` will usually be server IDs. If the
combobox options don't have an ID and only use user values, the value of this input will be the
same as the user input. Any prop related to the function of forms will be passed here. For
exampple, the `name` attribute will be passed here. The `ref` will pointed to this element.
- user input - This is the visible input and it should contain user-friendly values. Calls to
`.focus()` or `.blur()` are redirected to this input. Any prop passed to the `*.Input` component
that is not directly related to forms will be passed here (i.e. `data-testid`, `aria-*`, etc).

- form input - This input is only visible to forms and the `value` will usually be server IDs. If
the combobox options don't have an ID and only use user values, the value of this input will be
the same as the user input. Any prop related to the function of forms will be passed here. For
example, the `name` attribute will be passed here. The `ref` will be pointed to this element.

### Arbitrary

Expand Down

0 comments on commit 192a7c1

Please sign in to comment.